在HTML页面上,链接如下:
<a href="#pagelocation">Location on Page</a>
...应该导航到页面上的这个位置:
<a name="pagelocation">
但根据我的经验,它有时会遗漏 - 尤其是从其他页面链接时(如<a href="somepage.html#pagelocation">).通过"未命中",我的意思是它滚动到页面上的错误位置 - 也许是关闭,也许不是.
通常,目标位置最终位于屏幕顶部.我知道如果锚点下面没有足够的空间将其滚动到屏幕顶部,这可能会失败.
为什么它会失败？它完全取决于布局吗？我该如何解决？
(我保持这种一般性,因为我想要一个全能的参考答案.)
感谢关于非显式图像大小的指针.但是在所有元素都有明确大小的页面上呢？(我现在正在处理一个.)
Gre*_*reg 18
通常在页面加载完成之前可以进行滚动.如果您的图像没有宽度和高度,页面将跳转,然后加载图像并重新布局,使您之前跳转的位置看起来不对.
编辑:任何其他可以改变页面布局的东西也应该被怀疑......这包括没有加载的javascript和CSS <head>(更不用说所有的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;
}
}
我相信您看到的行为是在所有图像加载完毕之前浏览器定位到页面上的那个位置的结果.一旦图像完成加载,则页面的布局已经改变(例如,页面可能在垂直方向上更长),导致锚点应该改变的位置 - 但是浏览器仍然认为它已经导航到那个锚.
| 归档时间： |
|
| 查看次数： |
8602 次 |
| 最近记录： |