2

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

以下是我想要的：

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

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

但是，当我在 document.ready 上运行此程序时，十分之九的页面加载时元素位于顶部，而不是居中。

jsFiddle（注意我使用<div>的是 id，而不是<a>名称，但效果是一样的）

使用#middle 锚点转到页面的结果。

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

4

1 回答 1

0

!向我想要居中的锚点的任何链接添加了一个，并更新了我的代码以去除!：

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

于 2012-08-27T14:41:40.303 回答