Call Scroll only when user scrolls, not when animate()

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()?

I'm sure it looks nice and I'm interested in the solution to this problem, but as a matter of personal preference I don't like animated scrolling — Michael Haren
– Michael Haren, Commented Nov 2, 2009 at 2:45
@Michael Haren: Understood, but sometimes clients like animations :D — Brandon Wang
– Brandon Wang, Commented Nov 2, 2009 at 2:46

SLaks · Accepted Answer · 2009-11-02 02:51:52Z

5

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.

answered Nov 2, 2009 at 2:51

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SLaks Over a year ago

This should stop the animation as soon as it gets a scroll event that doesn't come from the animation. (By checking scrollAnimating)

Brandon Wang Over a year ago

@SLacks: your code does in fact work. My apologies for being so big-headed.

SLaks Over a year ago

I don't know; try debugging it in Firebug.

Piccinin · Accepted Answer · 2018-01-13 00:04:58Z

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;
})

answered Jan 13, 2018 at 0:04

Piccinin

111 bronze badge

1 Comment

ZF007 Over a year ago

Welcome to SO. Thanks for posting an answer. Please finish the tour and enjoy SO ;-)

Brandon Wang · Accepted Answer · 2009-11-02 03:04:24Z

-2

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;
})

answered Nov 2, 2009 at 3:04

Brandon Wang

4,0017 gold badges33 silver badges37 bronze badges

4 Comments

SLaks Over a year ago

There are many ways to scroll (drag selection, drag scrollbar, arrow keys, autoscroll); AFAIK, this will only catch mousewheel.

Brandon Wang Over a year ago

@SLacks: true, but most users will only use the scroll wheel. Many websites implement animate scroll-ups and rarely do they think of users who want to scroll midway through: this is a compromise between usability and bloat.

Brandon Wang Over a year ago

@SLacks: Never mind what I said before, your solution works great. My apologies for being snooty and not testing your example. I've still got a lot to learn.

SLaks Over a year ago

@Brandon#1: That's actually not true. I know many people who always use traditional scrollbars, and a couple of people who always use arrow keys. Also, just because many websites don't do it right doesn't mean you shouldn't; it's always nice to stand out from the crowd.

Collectives™ on Stack Overflow

Call Scroll only when user scrolls, not when animate()

3 Answers 3

3 Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related