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

当页面加载时，url中有一个锚定片段，而不是默认的滚动行为，因此锚定元素位于屏幕顶部，我希望它居中

以下是我想要的：

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

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

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

注意，我使用的是一个id，而不是一个使用中间锚点的页面

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

添加了一个！指向指向我希望居中的锚的链接，并更新代码以剥离！：

例如，浏览someUrl.com/Index！foo浏览器将忽略此选项！foo和页面将滚动，因此处于中心位置

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

添加了一个！指向指向我希望居中的锚的链接，并更新代码以剥离！：

例如，浏览someUrl.com/Index！foo浏览器将忽略此选项！foo和页面将滚动，因此处于中心位置

---

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

如果有人找到与这些事件顺序相关的参考，例如，浏览器何时滚动到锚点/id？我希望他们能分享，因为我遇到了一个相关的场景。在我的例子中，页面上有一些选项卡将ID（如tab-1）附加到URL，但我们不希望页面在加载时向下滚动到选项卡。window.setTimeout函数{$window.scrollTop0；}，0；似乎有效，但我觉得很难看。如果有人找到与这些事件顺序相关的参考，例如，浏览器何时滚动到锚/id？我希望他们能分享，因为我遇到了一个相关的场景。在我的例子中，页面上有一些选项卡将ID（如tab-1）附加到URL，但我们不希望页面在加载时向下滚动到选项卡。window.setTimeout函数{$window.scrollTop0；}，0；看起来很管用，但我觉得很难看。

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

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