Scroll jarring when using jQuery scrollTop

Question

I am using a very simple piece of code to animate a scroll to the top of my page. The code is as follows:

$(document).ready(function(){
    $('div#top').hover(function(){
        $('html, body').animate({
            scrollTop:0
        }, 2500);
    });
});

For some reason, once the scroll has occurred, if you try to scroll down again, the page jars for a few seconds before allowing you to scroll down. It seems to be worst when using FF though it's not much better in the other browsers.

Does anybody have any ideas on how I can get the jarring to stop?

Answer 1

If you pass only a single function to hover, it'll get executed upon mouse enter and mouse leave. So as soon as your mouse leaves the div#top element, another scroll animation starts, though you don't see it until you try to scroll down.

Bind to mouseenter instead.