时间戳

首页 > 解决方案 > 将 scrollTop 动画到窗口 onLoad 中的较低位置后，Chrome 跳回页面顶部

google-chrome - 将 scrollTop 动画到窗口 onLoad 中的较低位置后，Chrome 跳回页面顶部

问题描述

将我们的网站从 jQuery 1.10.2 升级到 jQuery 3.3.1 后，我们遇到了以下问题。

我们有这个 JavaScript 让页面在加载后跳转到位置 500。

$(window).on("load", function () {
    $("body, html").animate({ scrollTop: 500 }, 1);
});

这在 Firefox 中运行良好。

但是，在 Chrome 中，滚动到此位置后，它会向上滚动到页面顶部。当我在 Chrome JavaScript 调试中单步执行时，向下滚动后，这种向上滚动发生在 jquery-3.3.1 文件中的以下代码处：

// Animations created synchronously will run synchronously
function createFxNow() {
    window.setTimeout( function() {
        fxNow = undefined;
    } );
    return ( fxNow = Date.now() );
}

我如何 (1) 防止 Chrome 向上滚动，或 (2) 将我的代码附加到稍后的页面循环挂钩上，诸如此类$(window).on("completelyLoaded")？

标签： google-chromeonloadscrolltopjquery-migrate

解决方案

我最终通过使用两个嵌套$(document).ready语句解决了这个问题：

$(document).ready(function () {
    $(document).ready(function () {
        $("body, html").animate({ scrollTop: 500 }, 1);
    });
});

这显然是有效的，因为准备好的回调是按照它们分配的顺序调用的。当调用外部就绪回调时，所有其他脚本应该已经分配了它们的就绪回调。因此，现在分配您的就绪回调（内部回调）将导致您成为最后一个。换句话说，它之所以有效，是因为 jQuery 按照添加的顺序执行事件处理程序，并且在您的事件处理程序中添加事件处理程序是尽可能晚的。

推荐阅读