呼叫滚动只有当用户滚动，而不是在动画（）

Question

我有“去顶”，通过用漂亮的动画滚动页面顶端实现的目的，在页面上几个环节。我注意到，有时当页面滚动，用户将要滚动回落，例如，但这是不可能的。屏幕将仅口吃，但将继续动画直到它到达顶部。

我想如果用户试图滚动到停止的动画，因此我写了这个代码：

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

此代码是有问题的，因为动画（）计为滚动，因此它仅停止本身之前移动一点点。

我也试着键按下作为一个选项，但鼠标滚动不注册作为关键字。

有什么办法叫我滚动功能时，用户的滚动，而不是动画（）？

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是一个重入调用，从而使scroll事件行E.elem.scrollTop = E.now内被解雇。如果不是重入（它可能只在某些浏览器），scrollAnimating被设置回false后，该事件将被解雇。为了解决这个问题，你可以在scrollAnimating事件中scroll复位。

Answer 2

我是具有相同的问题，但是，我发现jQuery的文档的溶液右。有在动画的方法，用于设置一个回调函数完成动画时的特性。

http://api.jquery.com/animate/ ＃动画的属性持续时间-宽松完成

下面是代码：

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

想通了！在互联网上四处寻找后，我发现一种叫做Document.addEventListener为Mozilla和document.onmousewheel为IE和Opera，将捕获滚动事件。

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