Call Scroll only when user scrolls, not when anima

Question

I have a few links across the page with the purpose of "going to the top", accomplished by scrolling the page to the top with a nice animation. I've noticed that sometimes while the page is scrolling the user will want to scroll back down, for example, but this is not possible. The screen will only stutter but will continue animating until it reaches the top.

I want to stop the animation if the user attempts to scroll, therefore I wrote this code:

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        $('body').stop();
});
    return false;
})

This code is problematic, because the animate() counts as scrolling, therefore it only moves a tiny bit before it stops itself.

I've also tried key-down as an option but mouse scrolling doesn't register as a key.

Is there any way to call my scroll function when the user scrolls, not the animate()?

Answer 1

I was with the same problem, but I found a solution right on jQuery Documentation. There is a property in animate method that lets you set a callback function when animation is completed.

http://api.jquery.com/animate/#animate-properties-duration-easing-complete

Here is the code:

$('#gototop').click(function() {

    //This will help you to check 
    var animationIsFinished = false;

    $('body').animate({scrollTop:0},3000,"swing",function(){

        //this function is called when animation is completed
        animationIsFinished = true;

    });
    $(window).scroll(function () {
        //Check if animation is completed
        if ( !animationIsFinished ){
            $('body').stop();
        }
    });
    return false;
})

Answer 2

You could make write your own code to set the animation value, and set a flag indicating that the change comes from an animation.

For example: (Untested)

var scrollAnimating = false
jQuery.fx.step.scrollTop = function(E) {
    scrollAnimating = true;
    E.elem.scrollTop = E.now;
    scrollAnimating = false;
};

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        if (!scrollAnimating)
            $('body').stop();
    });
    return false;
})

You can do the same thing for scrollLeft.

Note that I'm assuming that setting scrollTop is a reentrant call, so that the scroll event is fired inside the line E.elem.scrollTop = E.now. If it's not reentrant (it might be only in some browsers), the event will be fired after scrollAnimating gets set back to false. To fix that, you could reset scrollAnimating inside the scroll event.

Answer 3

Figured it out! After looking around on the Internet I found something called Document.addEventListener for Mozilla and document.onmousewheel for IE and Opera that will catch scrolling events.

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);

    if(window.addEventListener) document.addEventListener('DOMMouseScroll', stopScroll, false);
    document.onmousewheel = stopScroll;

    function stopScroll() {$('body').stop()};

    return false;
})