I want to make it so that a webpage automatically scrolls to a certain element, however I don't want the scrolling to fight user input– If it begins to scroll and then the user scrolls, I want the automated scrolling to stop and let the user have full control.
So I originally thought I could do something like this:
var animatable = $('body, html');
animatable.animate({scrollTop: $('#foo').offset()}, 1000);
$(window).scroll(function() { animatable.stop(); });
however, the problem is– the animation of the scrollTop triggers the scroll event handler for window! So, the animation begins and then stops immediately.
I am looking for a way that I can make my window scroll event handler only stop if it's triggered by user input… Is this possible?
Best Answer
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):