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

i have set snippet scrolls page section view when it's clicked, problem if user wants scroll in middle of animation scroll kinda stutters.

    $( "section" ).click(function(e) {         $('html,body').animate({ scrolltop: $(this).position().top }, 'slow');         return false;      }); 

how can stop jquery animation if user scrolls manually?

change function 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 animation if user scrolls manually (only during animation)
• does not obstruct normal jquery animation, such of other answers would

---

some information:

why binding of events? "scroll mousewheel etc..."

there many different types of scroll events. can scroll down using mouse, keyboard, touchscreen, etc. make sure catch all of them.

what use of var page = $("html, body");? can't use $("html, body") everywhere?

if use same selector more once, it's practice cache them in variable. easier write/use, , has better performance having program re-calculate selector every time.

where can find more info on .animate() , .stop()?

you can read jquery documentation .animate() , .stop(). recommend reading animation queue's since .stop() works on principle.