仅在用户滚动时调用滚动，而不是在动画（）时调用滚动

我在页面上有一些链接，目的是“走到顶端”，通过将页面滚动到顶部并获得一个漂亮的动画来实现。 我注意到，有时在页面滚动时，用户会想要向下滚动，例如，但这是不可能的。 屏幕只会断断续续，但会继续制作动画，直到它到达顶部。

我想在用户尝试滚动时停止动画，因此我编写了这段代码：

$('#gototop').click(function() { $('body').animate({scrollTop:0},3000); $(window).scroll(function () { $('body').stop(); }); return false; }) 

这段代码是有问题的，因为animate（）计为滚动，因此它只会在停止之前移动一点点。

我也试过按键作为选项但鼠标滚动没有注册为键。

用户滚动时有没有办法调用我的滚动function，而不是动画（）？

Answer 1

您可以编写自己的代码来设置动画值，并设置一个标志，指示更改来自动画。

例如:(未经测试）

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

你可以为scrollLeft做同样的事情。

请注意，我假设设置scrollTop是一个可重入调用，因此在E.elem.scrollTop = E.now行中触发scroll事件。 如果它不可重入（可能仅在某些浏览器中），则在scrollAnimating设置回false后将触发该事件。 要解决此问题，您可以在scroll事件中重置scrollAnimating 。

Answer 2

我遇到了同样的问题，但我在jQuery文档上找到了解决方案。 animate方法中有一个属性，允许您在动画完成时设置回调函数。

http://api.jquery.com/animate/#animate-properties-duration-easing-complete

这是代码：

 $('#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; }) 

Answer 3

弄清楚了！ 在互联网上环顾四周后，我找到了一个叫做Mozilla的Document.addEventListener和一个用于IE和Opera的document.onmousewheel来捕捉滚动事件。

 $('#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; })