使用 animate-scrollTo 时 jQuery 闪烁答案

【问题标题】：jQuery flicker when using animate-scrollTo使用 animate-scrollTo 时 jQuery 闪烁
【发布时间】：2012-05-23 18:34:42
【问题描述】：

当 jQuery animate 函数调用 scrollTo 函数时，我遇到了问题。

这是我的代码：

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

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

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

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

【问题讨论】：

请为需要的人提供 scrollTo 插件的链接。
这是示例。 demos.flesler.com/jquery/scrollTo 这就是我得到插件的地方。 flesler.blogspot.com/2007/10/jqueryscrollto.html
已解决（可能）。我使用 scrollTo 插件来检测哈希标签，当单击按钮时，我将其设置为返回 true，以便哈希出现在链接上，并使浏览器在动画之前首先移动到选定的 id。我再次将其设置为 false，现在它的动画正常。

标签： jquery html cross-browser

【解决方案1】：

在 laravel 项目中使用“barryvdh/laravel-debugbar”包时遇到了同样的问题。如果是这种情况，请禁用它。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

有同样的问题...通过在点击处理程序上返回 false 来修复它

【讨论】：

我的问题在使用 .stop(true) 后得到了解决。

【解决方案4】：

我有同样的闪烁问题。它是由触发函数的链接中的哈希锚引起的。用 preventDefault() 修复它：

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

【讨论】：

澄清一下：问题是因为（1）浏览器执行跳转到锚点（2）然后jQuery跳回并缓慢滚动到锚点。
谢谢，这也解决了我的问题。但是如果我在多个下拉菜单中使用它，滚动到下一个并且最后一个有一个活动锚点怎么办。这将停止重定向到 href。