Question

jQuery scrollTo函数调用animate函数时遇到问题。

这是我的代码：

$("#button").click(function(){
    $("body").animate({scrollTop: 1400},"slow");
});

单击按钮时，在正文滚动之前会出现闪烁。例如，我在（滚动位置）1000，当我点击按钮时发生以下情况：

页面/图像打开（滚动位置）1400出现，看起来我已经走了到（位置）1400
然后再次移动到（位置）1000，这发生得太快了并且看起来像一个闪烁
最后它像普通卷轴一样滚动到1400 ..

在Firefox上它总是会出现，有时也会出现在Chrome上。

Answer 1

我有同样的闪烁问题。它是由链接中的哈希锚引发的。用preventDefault（）修正了它：

$("#button").click(function(e){
    e.preventDefault();
    $("body").animate({scrollTop: 1400},"slow");
});

Answer 2

<a href="#" onclick="return scrollFromTop(1400, 2000);">scroll</a>

function scrollFromTop(offset, duration) {
    $('body').stop(true).animate({scrollTop: offset}, duration);
    return false;
});

有同样的问题...通过在点击处理程序

上返回false来修复它

Answer 3

通过停止这样的动画解决了这个问题：

$('body,html').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function(e){
            if ( e.which > 0 || e.type == "mousedown" || e.type == "mousewheel" || e.type == "touchmove"){
                $("html,body").stop();
            }
        })

在那里找到：Jquery .animate() stop scrolling when user scrolls manually?

使用animate-scrollTo时jQuery闪烁

3 个答案: