Scrolling/Scrollbar Locks After Scrolltop Animation

Question

I've got a few anchors that link to specific sections (using hashtags) within the page, and ones that scroll to the top or bottom of the document window.

$("html, body").animate({ scrollTop: $(document).height() }, 2000);

However, as soon as the animation and scrolling has reached it's destination and completed, the document scrolling and scrollbar seem to disable for a few seconds. For example, if click a "Go to bottom of page" link, my document window will scroll to the bottom of the page correctly. As soon as I try to scroll back up, it jiggles a bit up and down in a jittery motion and allows me to scroll a few tries later.

Any tips on what might be causing this?

Answer 1

This thread is old, but I ran into this and there arent answers anywhere, but here is a solution:

$(window).bind("mousewheel", function() {
    $("html, body").stop();
});

if the user uses the scrollbar while the animation is executing, it stops the animation.

Answer 2

Just to contribute to Scotty's answer, you can actually also add two options to the .stop() method: clearQueue & jumpToEnd.

I ran across a scroll issue, and used Scotty's suggested .stop() to begin with, but noticed that the animation was still "struggling" to finish. I checked out the documentation here: .stop() Method Documentation

By adding .stop(true, false); I was able to:

1.) remove queued animations (just in case several were triggered / cascading)

2.) prevent the animation from trying to jump to its end value.

Hope that helps anyone else banging their head against a keyboard ;)

Answer 3

I recomend to adding $("html, body").stop(); before "animate" too.

$("html, body").stop();
$("html, body").animate({ scrollTop: $(document).height() }, 2000);
$(window).bind("mousewheel", function() {
    $("html, body").stop();
});