jQuery scrolling too far

Question

I know this has been asked but I am unsure of how to apply answers to my site. I have a fixed navbar in BOOTSTRAP and the scroll to a certain div goes just a BIT too far so that the top of the div is blocked by the fixed nav.

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

Can you create a jsfiddle with all of the HTML and Javascript? — Wio
– Wio, Commented Jul 10, 2014 at 1:41

haxxxton · Accepted Answer · 2014-07-10 01:43:37Z

3

The section $($anchor.attr('href')).offset().top is used to calculate how far down the page to scroll the body.

You can add or subtract from this number to align things better.

You could measure the height of the nav and use that figure to subtract from the offset().top value

$(function() {
    var navHeight = $('#fixedNav').outerHeight(); // adjust this for your nav id
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - navHeight
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

You could then also update this value when the window resizes, such that if your navigation changes height (say if a line break occurs) this updates your fixed value

$(function() {
    var navHeight = $('#fixedNav').outerHeight(); // adjust this for your nav id
    $(window).bind('resize', function(){
        navHeight = $('#fixedNav').outerHeight(); // adjust this for your nav id
    });
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top - navHeight
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

If you want to go with this updating on resize event solution i would also suggest implementing some kind of throttler (so that it only updates the height value once every 100ms for example, rather than on each event trigger), this should boost performance. Have a look at something like Ben Almans Throttle/Debounce library

answered Jul 10, 2014 at 1:43

haxxxton

6,4423 gold badges29 silver badges61 bronze badges

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

2 Comments

user3822575 Over a year ago

I thought I thanked you for this earier...but THANK YOU

haxxxton Over a year ago

very welcome @user3822575, please dont forget to make an answer as correct so that others can find the solution if they are looking :)

Collectives™ on Stack Overflow

jQuery scrolling too far

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related