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

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

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

(我保持这种一般性,因为我想要一个全能的参考答案.)

更新1

感谢关于非显式图像大小的指针.但是在所有元素都有明确大小的页面上呢？(我现在正在处理一个.)

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

编辑:任何其他可以改变页面布局的东西也应该被怀疑......这包括没有加载的javascript和CSS (更不用说所有的CSS 都应该加载到头部;它并不总是).

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

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

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