5

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

Brandon Wang
  • 3,701
  • 7
  • 31
  • 36

3 Answers3

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.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
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;
})
Piccinin
  • 11
  • 1
-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;
})
Brandon Wang
  • 3,701
  • 7
  • 31
  • 36
  • There are many ways to scroll (drag selection, drag scrollbar, arrow keys, autoscroll); AFAIK, this will only catch mousewheel. – SLaks Nov 02 '09 at 03:06
  • @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 Nov 02 '09 at 03:41
  • @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. – Brandon Wang Nov 02 '09 at 03:43
  • 1
    @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. – SLaks Nov 11 '09 at 22:09