Html 为什么页面锚有时会漏掉？

在HTML页面上，有如下链接：

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

…应导航到页面上的此位置：

<a name="pagelocation">

但根据我的经验，它有时会出错——特别是从另一个页面链接时（如

）。我所说的“未命中”，是指它滚动到页面上的错误位置——可能是关闭，可能不是

通常，目标位置会显示在屏幕顶部。我知道如果锚下没有足够的空间将其滚动到屏幕顶部，此操作可能会失败

否则它为什么会失败？这完全取决于布局吗如何修复它？

（我保留这个常规，因为我想要一个全面的参考答案。）

更新1

---

感谢到目前为止关于非显式图像大小的提示。但是在所有元素都有显式大小的页面上呢？（我现在正在处理一个问题。）

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

通常在页面完成加载之前会发生滚动。如果您的图像没有宽度和高度，页面将跳转，然后加载图像并重新布局，使您先前跳转的位置看起来错误

编辑：任何其他可以改变页面布局的东西都应该被怀疑。。。这包括未加载在

中的javascript和CSS（不要介意所有CSS都应加载在头部；并非总是如此）

---

如果页面通过重定向被跳转，我相信IE会滚动结束页面，但Firefox不会。请注意，您可以将

id=“pagelocation”

添加到几乎任何HTML元素中，以获得相同的结果，从而节省您为链接目的地添加附加锚。

如上所述，这可能是由于图像渲染延迟以及加载时“调整”布局造成的

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

---

顺便说一句，我以前遇到过这样的问题，在足够多的页面之间使用forward/back，图像需要重新加载，这导致我在渲染后出现在错误的位置。

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

---

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

确定。我认为这是新的。使用HTML5的

autofocus

将导致失火，jQuery的

focus（）

方法也是如此。花了90分钟的反复试验才发现这一点，因为我认为问题与图像有关：）

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

---

你会如何构造链接？同样-我认为如果目标位于浮动容器中，或者容器使用“静态”以外的任何其他方法定位，也可能会出现问题，因为这会破坏文档的自然流动……我的“目录”锚也有这个问题。特别是当按下“后退”按钮后再向前时，当页面加载时，单击任何锚定链接都不会执行任何操作，直到页面完全加载为止。我有多个脚本被延迟，其中一些脚本必须在页面中创建一些元素。节省了我很多时间，简单的概念..必须有！其中需要渲染大量图像。。