Question

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

以下是我想要的：

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锚点进入页面。

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

Answer 1

为我想要居中的主播添加了!，并更新了我的代码以剥离!：

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显示在顶部，然后再次以它为中心。

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

1 个答案: