18

在 HTML 页面上，这样的链接：

<a href="#pagelocation">Location on Page</a>

...应该导航到页面上的这个位置：

<a name="pagelocation">

但根据我的经验，它有时会丢失 - 特别是在从另一个页面链接时（如<a href="somepage.html#pagelocation">）。通过“未命中”，我的意思是它滚动到页面上的错误位置——可能接近，也可能没有。

通常，目标位置最终位于屏幕顶部。我知道如果锚下方没有足够的空间将其滚动到屏幕顶部，这可能会失败。

不然为什么会失败？它完全取决于布局吗？我该如何解决？

（我保持这个一般，因为我想要一个包罗万象的参考答案。）

更新 1

感谢迄今为止关于非显式图像大小的指针。但是在所有元素都有明确大小的页面上呢？（我现在正在处理一个。）

4

7 回答 7

18

在页面完成加载之前，通常会发生滚动。如果你的图片没有宽度和高度，页面会跳转，然后加载图片并自行重新布局，让你之前跳转的地方看起来不对。

编辑：任何其他可以改变页面布局的东西也应该被怀疑......这包括未加载的javascript和CSS <head>（不要介意所有CSS都应该加载到头部；并非总是如此）。

如果页面通过重定向反弹，我相信 IE 会滚动结束页面，但 Firefox 不会。

于 2009-01-06T14:52:29.873 回答
7

JS解决方案

在准备好的文档上运行此功能。

 function goToAnchor() { 
    hash = document.location.hash;
    if (hash !="") {
        setTimeout(function() {
            if (location.hash) {
                window.scrollTo(0, 0);
                window.location.href = hash;
            }
        }, 1);
    }
    else {
        return false;
    }
}
于 2014-03-03T11:38:24.807 回答
5

我相信您看到的行为是浏览器在所有图像完成加载之前定位到页面上该位置的结果。一旦图像完成加载，页面的布局就会发生变化（例如，页面可能在垂直方向上更长），导致锚点的位置应该发生变化 - 但浏览器仍然认为它已经导航到那个位置锚。

于 2009-01-06T14:51:07.600 回答
2

如上所述，这可能是由于图像延迟渲染并在加载时“调整”布局。

如果您可以指定图像的大小，则可以在渲染之前分配那么多空间，这应该可以防止出现问题。

作为旁注，我之前遇到过这个问题，即在图像需要重新加载的足够多的页面之间使用前进/后退的形式，导致我在渲染后最终出现在错误的位置。

于 2009-01-06T15:37:18.863 回答
2

当 JavaScript 在页面顶部创建下拉菜单时，我也看到了这种情况。然后，一旦菜单完成，它就会被隐藏，向上滚动下面的内容。

同时，浏览器已经在窗口顶部设置了目标位置。隐藏页面顶部的菜单会将目标位置从窗口顶部向上移动。

于 2009-10-29T21:20:36.210 回答
1

请注意，您可以添加id="pagelocation"到几乎任何 HTML 元素，以获得相同的结果，这样您就可以为链接目标添加额外的锚点。

于 2009-01-06T15:15:34.040 回答
1

好的。我认为这是新的。使用 HTML5autofocus会导致失败，jQuery 的focus()方法也一样。花了 90 分钟的反复试验才发现这一点，因为我认为问题与图像有关 :)

于 2013-07-01T10:19:20.037 回答