Question

I’m trying to use jquery to ease scroll to anchors when clicking on a link. But I don’t want it to scroll all the way to the top. It has to stop at least 90px from the top so the anchored div won’t get behind my fixed header menu bar which is 90px high. Any ideas?

$(function() {
    $('a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop:  $($anchor.attr('href')).offset().top
        }, 1500,'easeInOutExpo');

        event.preventDefault();
    );
});

Answer 1

Have you tried subtracting 90 pixels to the top position, like this:

scrollTop: ($($anchor.attr('href')).offset().top - 90)

If that works, you can get the height of the header menu bar dynamically:

scrollTop: ($($anchor.attr('href')).offset().top - $('menubar').outerHeight()))