Question

我目前正在使用以下代码在刷卡检测脚本的回调中自动滚动到顶部。我想添加在用户在动画期间点击屏幕时取消动画的功能。

$('body,html').animate({
    scrollTop: 0
}, 300);

我将如何取消此取消？

Answer 1

使用stop方法停止动画。请务必为false参数传递jumpToEnd，这样用户就不会自动转到屏幕顶部。

$(function() {
    //Substitute with whatever kicks off this scroll in your app.
    $('button').on('click', function(evt) {
        $('body,html').animate({
            scrollTop: 0
        }, 3000);

        evt.stopPropagation();
    });

    $(window).on('click', function(evt) {
        $('body,html').stop();
    });
});

实例 - http://jsfiddle.net/FcLbH/2/

修改 - 根据@ AvL的评论删除参数stop。

Answer 2

也许是这样的：

$('body,html').animate({
    scrollTop: 0
}, 3000).click(function() {
    $('body,html').stop();
});

示例：http://jsfiddle.net/DJ8Re/1/

Answer 3

我不太确定点击检测，无论如何，这会在3秒后停止动画：

$('body,html').animate({
    scrollTop: 0
}, 6000);

setTimeout(function() { $('html,body').stop(); }, 3000);

关于stop（）的所有信息：http://api.jquery.com/stop/

取消滚动到单击时的顶部操作

3 个答案: