Question

I currently am using the following code to auto-scroll to the top on a callback from a swipe detect script. I want to add the ability to cancel the animation when the user clicks the screen during the animation.

$('body,html').animate({
    scrollTop: 0
}, 300);

How would I accomplish this cancelation?

Answer 1

Use the stop method to stop the animation. Make sure to pass false for the jumpToEnd parameter so the user isn’t automatically taken to the top of the screen.

$(function() {
    //Substitute with whatever kicks off this scroll in your app.
    $('button').on('click', function(evt) {
        $('body,html').animate({
            scrollTop: 0
        }, 3000);

        evt.stopPropagation();
    });

    $(window).on('click', function(evt) {
        $('body,html').stop();
    });
});

Live example – http://jsfiddle.net/FcLbH/2/

Edit – Removed the parameters to stop per @AvL’s comment.