Question

在HTML页面上，链接如下：

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

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

<a name="pagelocation">

但根据我的经验，它有时会遗漏 - 尤其是从其他页面链接时（如<a href="somepage.html#pagelocation">）。通过“未命中”，我的意思是它滚动到页面上的错误位置 - 可能是关闭，也许不是。

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

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

（我保持这种一般性，因为我想要一个全能的参考答案。）

更新1

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

Answer 1

通常在页面加载完成之前就可以进行滚动。如果您的图像没有宽度和高度，页面将跳转，然后加载图像并重新布局，使您之前跳转的位置看起来不对。

编辑：任何其他可以改变页面布局的内容也应该被怀疑......这包括未在<head>中加载的javascript和CSS（更不用说所有CSS 应该被装入脑袋;并非总是如此。

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

Answer 2

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

Answer 3

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;
    }
}

Answer 4

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

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

作为附注，我之前遇到过这样的问题：在足够的页面之间使用前进/后退，图像需要重新加载，导致我们在渲染后最终到达错误的位置。

Answer 5

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

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

Answer 6

请注意，您可以将id="pagelocation"添加到任何HTML元素中，以获得相同的结果，从而节省您为链接目标添加其他锚点。

Answer 7

行。我认为这是新的。使用HTML5的autofocus会导致失败，jQuery的focus()方法也是如此。花了90分钟的反复试验来发现这个，因为我认为这个问题与图像有关：）

为什么页面锚点有时会错过？

更新1

7 个答案: