JQUERY, scrollTo, after scrolling down, the page w

Question

I'm using the following JQUERY to attach an even to a link in the header, which essentially scrolls to the bottom of the page:

$('#comment-count-btn').click(function(){
    $('html,body').scrollTo('#comment-wrapper', 500);
});

Problem is, that it scrolls all the way to the bottom of the page (which is correct), but then when I try to scroll up a tad, the scroll bar jumps, as if it's locked for a little bit.

Any ideas?

Answer 1

Try adding return false; in the end of click() function. Also, try scrollTo only to the 'body' not both html and body. It maybe confusing scrollTo.

Answer 2

Having the click event out of the scroll function worked for me

Answer 3

Try to trace your click using console.log, most likely your element is being clicked multiple times.

Also, if you have on scroll capturing the position make sure that the on click is outside of the on scroll. That's how I fixed this same issue.

$(window).on('scroll', function()){
    if (scrollTop.length > 0) {
        if ($(this).scrollTop() > 500) {
            scrollTop.fadeIn();
        } else {
            scrollTop.fadeOut();
        }
    }
}

// the click event has to be outside of the scroll event
scrollTopButton.click(function() {
    $("html,body").animate({
        scrollTop: 0
    }, 1000);
    return false;
});