javascript - 以 anchor 为中心加载页面 - 浏览器在文档就绪事件后滚动到顶部？

Question

当页面在 url 中加载 anchor (片段)时，而不是默认的滚动行为，锚定元素位于屏幕顶部，我希望它居中。

以下是我想要的:

var $targetDiv = $(window.location.hash);

if ($targetDiv) {
    var $window = $(window);
    $window.scrollTop($targetDiv.offset().top - ($window.height() / 2));
}

但是，当我在 document.ready 上运行它时，10 次中有 9 次页面加载时元素位于顶部，而不是居中。

jsFiddle (请注意，我使用的是带 ID 的 <div>，而不是带名称的 <a>，但效果是一样的)

Result转到带有#middle anchor 的页面。

如果非要我猜的话，似乎浏览器正在执行它的工作并在 ready 事件触发后 滚动到元素的顶部。以锚定元素居中加载页面的正确方法是什么？

Answer 1

添加了一个 !到我想要居中的 anchor 的任何链接，并更新我的代码以删除 ! :

var $targetDiv = $(window.location.hash.replace(/!/, ''));

if ($targetDiv) {
    var $window = $(window);
    $window.scrollTop($targetDiv.offset().top - ($window.height() / 2));
}

例如，浏览到 someUrl.com/Index#!foo浏览器会忽略 #!foo页面会滚动 <div id="foo">居中。

另一个部分解决方案是在窗口加载时运行上述代码，而不是在文档就绪时运行。不幸的是，浏览器会滚动两次，一次使 div 显示在顶部，然后再次居中显示。