Anchor using Animate.scrollTop with custom height

Question

I need to edit the content anchor to a lower height than the content.

I’m using the js

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

and when I click, I am 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 does it look:

How it should look:

jsfindle: http://jsfiddle.net/thallysondias/n4r2ao8n/ Is there any way to keep the anchor function (with the link displaying xxx.com#Section) and still edit the height for fewer pixels?

Answer 1

Yes, you need to do 2 things:

1. Measure the header height
2. Discount header height value to 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.

Below is an example of how to do this in Chrome:

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

• Move the image to the area of the element being measured (in your case, the header)
• Note the height value (in the case of the above image, 208px)

Doing the (2), your code would look something like this:

$(".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 measured value using Dev Tools, in the case of the above image, would be 208.