Question

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

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

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

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

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

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

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文档上找到了解决方案。 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

想出来！在互联网上环顾四周后，我找到了一个名为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;
})

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

3 个答案: