Jquery .Animate() Stop Scrolling When User Scrolls Manually

Jquery .animate() stop scrolling when user scrolls manually?

Change your function to this:

var page = $("html, body");

$( "section" ).click(function(e) {

   page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
       page.stop();
   });

   page.animate({ scrollTop: $(this).position().top }, 'slow', function(){
       page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
   });

   return false; 
});

This will:

• Stop the animation if the user scrolls manually (only during the animation)
• Does not obstruct your normal jQuery animation, such some of the other answers would

---

Some extra information:

Why are you binding to all of those events? "scroll mousewheel etc..."

There are many different types of scroll events. You can scroll down using your mouse, keyboard, touchscreen, etc. With this we make sure to catch all of them.

What is the use of var page = $("html, body");? Can't I just use $("html, body") everywhere?

If you use the same selector more than once, it's good practice to cache them in a variable. It will be easier to write/use, and has better performance than having the program re-calculate the selector every time.

Where can I find more info on .animate() and .stop()?

You can read the jQuery documentation for .animate() and .stop(). I also recommend reading about animation queue's since .stop() works on this principle.

let user scrolling stop jquery animation of scrolltop?

Diode's solution didn't work for me - scroll() didn't differentiate between the animation and the user, meaning the animation stopped immediately. From a different post, the following works for me (modified for this purpose):

// Assign the HTML, Body as a variable...
var $viewport = $('html, body');

// Some event to trigger the scroll animation (with a nice ease - requires easing plugin )...
$('#element').click(function() {
    $viewport.animate({ 
        scrollTop: scrollTarget // set scrollTarget to your desired position
    }, 1700, "easeOutQuint");
});

// Stop the animation if the user scrolls. Defaults on .stop() should be fine
$viewport.bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
         $viewport.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup'); // This identifies the scroll as a user action, stops the animation, then unbinds the event straight after (optional)
    }
});                 

Have page auto-scroll - but stop auto scrolling when the user manually scrolls (jquery?)

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e){
 if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel"){
  $("html,body").stop();
 }
});

I found your answer at

How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?

I've added jsbin to describe

http://jsbin.com/dujuxihota/1/edit?js,output

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

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.

Is there a way to disable jQuery scroll animation for some html anchors?

just add a new class to a tags, for which you want to be disabled:

<a class="noscroll"  href="# ...

and change that to:

 $('a[href^="#"]').not(".noscroll").on(...

Cancel scrolling after user interaction

you need animation marker, something like this

$("html, body").stop(true, false).prop('animatedMark',0.0).animate({scrollTop : top, animatedMark: '+=1.0'})

Here is the code, the code was mix of GWT and javascript so moved it to js, not fully tested, please try it

var lastAnimatedMark=0.0;
function scrollToThis(top){
    // Select/ stop any previous animation / reset the mark to 0 
    // and finally animate the scroll and the mark
    $("html, body").stop(true, false).prop('animatedMark',0.0).
    animate({scrollTop : top, animatedMark: '+=1.0'}
    ,10000,function(){
        //We finished , nothing just clear the data         
        lastAnimatedMark=0.0;
        $("html, body").prop('animatedMark',0.0);
    });
}
//Gets the animatedMark value
function animatedMark() {
    var x=$("html, body").prop('animatedMark');
    if (x==undefined){
        $("html, body").prop('animatedMark', 0.0);
    }
    x=$("html, body").prop('animatedMark');
    return x;
};

//Kills the animation
function stopBodyAnimation() {
    lastAnimatedMark=0;
    $("html, body").stop(true, false);
}
//This should be hooked to window scroll event 
function scrolled(){
    //get current mark
    var currentAnimatedMark=animatedMark();         
    //mark must be more than zero (jQuery animation is on) & but 
    //because last=current , this is user interaction.
    if (currentAnimatedMark>0 && (lastAnimatedMark==currentAnimatedMark)) {
        //During Animation but the marks are the same ! 
        stopBodyAnimation();
        return;
    }

    lastAnimatedMark=currentAnimatedMark;    
}

Here is the blog about it

http://alaamurad.com/blog/#!canceling-jquery-animation-after-user-interaction

Enjoy!

Stop page scroll jquery

Instead of using .scrollTo(), use

// see http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12/
$('html,body').animate({ scrollTo: 0 }, 1000);

then you can stop the scrolling using

// see http://stackoverflow.com/a/2836104/145346
$('html,body').stop();

---

Related Topics