Anchor using animate.scrollTop with custom height

Question

Anchor using animate.scrollTop with custom height

Navigation

#1 by (1 votes)

0

I need to edit the anchor of the content to a smaller height than the content.

I'm using js

 $(".white-felling").click(function(){
                    $("html,body").animate({scrollTop:$("#white-felling").offset().top},"500");
                    return true
                })

And when I click, I'm directed to the content:

 <section class="text medium-12 medium-centered columns" id="white-felling">
bla bla bla
</div>

But I have a problem, because I use a header with fixed height, so when using the anchor the content is hidden.

How it works:

Howtostay:

jsfindle: link Is there any way to keep the anchor function (with the link displaying xxx.com # section) and still edit the height for fewer pixels?

jquery

asked by anonymous 25.11.2014 / 17:05

1 answer

Consultation for Electronic Invoice? How to create an administrator profile from this code?

score 1 · Accepted Answer

Yes, you need to do 2 things:

Measure header height

Decrease the height value of the header in the integer value passed to scrollTop

For (1), you can use Crome Dev Tools for Google Chrome Firebug for Firefox or Internet Explorer Developer Tools, if you use IE.

Here's an example of how to do this in Chrome:

Press F12
Click on the magnifying glass, as in the image below:

Movetheimagetotheareaoftheelementtobemeasured(inthiscase,theheader)
Notetheheightvalue(inthecaseoftheimageabove,208px)

Doing(2),yourcodewouldlooksomethinglikethis:

$(".white-felling").click(function(){
    $("html,body").animate({
        scrollTop: $("#white-felling").offset().top - <valor_altura_do_header>
    },"500");
    return true
    })

Where <valor_altura_do_header> is the value measured using Dev Tools, in the case of the above image, it would be 208.