jQuery scroll offset because of fixed header

Question

I have the following jQuery-script to scroll the page down.

$(document).ready(function() {

$('a[href^=#]').on('click', function(e){
    var href = $(this).attr('href');
    $('html, body').animate({
        scrollTop:$(href).offset().top
    },1500);
    e.preventDefault();
    });
});

The page has a fixed header with a height of 100px. Obviously I need to scroll down 100px less, so the header doesn't overlay the heading. I googled and I need to put in "{offset: -100}" somewhere.. but where?

Pete TNT · Accepted Answer · 2014-09-12 10:07:55Z

5

Just reduce the header height from the scrollTop amount.

 $('html, body').animate({
   scrollTop: $(href).offset().top - $("header").outerHeight() + "px"
 }, 1500);

answered Sep 12, 2014 at 10:07

Pete TNT

8,4834 gold badges40 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery scroll offset because of fixed header

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related