如何在 jQuery 的 animate() 执行之前阻止屏幕闪烁答案

【问题标题】：How to stop the screen from flickering right before jQuery's animate() executes如何在 jQuery 的 animate() 执行之前阻止屏幕闪烁
【发布时间】：2023-03-07 19:00:02
【问题描述】：

我注意到在滚动到顶部动画之前，屏幕会闪烁。
这可以在以下位置看到：http://www.dreamtheater.co.il

重新创建：

向下滚动直到菜单栏只停留在顶部
单击菜单中最右侧的链接

HTML 的正文是这样的：<body id="top">.
以及 JavaScript（最底部的相关代码）：

$(function() {
    var stickyHeader = $('#menubar').offset().top;

    $(window).scroll(function() {
        if ($(window).scrollTop() > stickyHeader) {
            ...
            ...
            $("a[href='http://www.dreamtheater.co.il/index/']").attr('href', '#top');
        } else {
            ...
            ...
            $("a[href='#top']").attr('href', 'http://www.dreamtheater.co.il/index/');
        }
    });

    $('#top').on("click",function() {
        $('body,html').animate({ scrollTop: 0 }, 'slow')
    });
});

【问题讨论】：

是只在 Chrome 中（基于标签），还是在其他浏览器中？什么操作系统？
你能传递一个 url 或一个 jsfiddle 吗？
@ajp15243，到目前为止我只在 Chrome 中测试过，也许这个标签还为时过早... OS 是 OS X。
@JoãoMosmann，可以在这里看到实际操作：dreamtheater.co.il
如果可能，我会在非 OS X 上的 Chrome 和其他浏览器中尝试。由于 Chrome 在 v28 中切换到 Blink 引擎，因此可能会出现一些罕见的错误。我在 Linux 上的 Chrome 29 中没有看到该问题。

标签： javascript jquery jquery-animate

【解决方案1】：

好的，看来问题有两个方面：

我指向 <body id="top"> 而不是 href，我也在滚动时动态更改它
没有“发布”事件

现在运行流畅，没有闪烁，像这样：

$("#menubar").on("click", "#menu a[href='#top']", function(){
    $('body,html').animate({ scrollTop: 0 }, 'slow');
    return false;
});

【讨论】：

return false!太好了！

【解决方案2】：

嗯，据我了解。这是重新计算元素的大小和位置的问题。

我建议您将 #menu 设置为 position:absolute 而不是 position:static。

因此，当您将菜单位置 css 从绝对更改为固定时，浏览器将不需要重新计算其他元素的位置和大小，因为这两个位置（绝对和固定）都在其他元素之上，不要不影响“物理上”

【讨论】：

谢谢，但这并没有使闪烁消失，而且还破坏了默认菜单放置...
是的，您需要使用 css 将菜单定位在正确的位置。但这很奇怪，它应该有效。

【解决方案3】：

我认为，带有事件变量的变体更干净：

$("#menubar").on("click", "#menu a[href='#top']", function(e){
    e.preventDefault();
    $('body,html').animate({ scrollTop: 0 }, 'slow');
});

【讨论】：