为什么页面锚点有时会错过？ [英] Why do page anchors sometimes miss?
问题描述
< a href =＃pagelocation>页面< / A>
...应该导航到页面上的这个位置：
< a name =pagelocation>
但根据我的经验，它有时会错过 - 特别是从另一个页面链接时（例如< a href =somepage.html＃pagelocation> ）。通过错过，我的意思是它滚动到页面上的错误位置 - 可能接近，也许没有。
通常，目标位置结束于屏幕。我知道如果锚点下方没有足够的空间将其滚动到屏幕的顶部，这可能会失败。
为什么其他的会失败？它完全依赖于布局吗？ 我该如何解决这个问题？
（我保留这个概要，因为我想要一个全面的参考答案。） p>
更新1
感谢迄今为止关于非显式图像尺寸的指针。但是在所有元素都有明确大小的页面上呢？ （我正在处理一个。）
很多时候，页面加载完成之前可能会发生滚动。如果您的图片没有宽度和高度，页面会跳转，然后加载图片并重新排版，使您之前跳过的位置看起来不对。
编辑：其他任何可以改变页面布局的东西都应该被怀疑......这包括JavaScript和CSS，它们并没有在< head> 中加载（不必介意所有的CSS 应该在头部加载;它并不总是）。
如果页面通过重定向弹出，我相信IE会滚动结束页面但Firefox不会。
On an HTML page, a link like this:
<a href="#pagelocation">Location on Page</a>
...should navigate to this spot on the page:
<a name="pagelocation">
But in my experience, it sometimes misses - especially when linking from another page (like <a href="somepage.html#pagelocation">). By "misses," I mean it scrolls to the wrong spot on the page - maybe close, maybe not.
Normally, the target location ends up at the top of the screen. I know this can fail if there's not enough room below the anchor to scroll it to the top of the screen.
Why else would it fail? Does it depend on layout at all? How can I fix it?
(I'm keeping this general because I'd like a catch-all reference answer.)
Update 1
Thanks for the pointers so far about non-explicit image sizes. But what about on a page where all the elements have explicit size? (I'm dealing with one now.)
Quite often the scrolling can occur before the page has finished loading. If you have images without widths and heights, the page will jump, then load the image and re-layout itself, making the place you previously jumped to seem wrong.
Edit: Anything else that can change page layout should also be considered with suspicion... this include javascript and CSS that's not loaded in the <head> (never mind that all CSS should be loaded in the head; it isn't always).
If the page is bounced through a redirect, I believe IE will scroll the end page but Firefox won't.
这篇关于为什么页面锚点有时会错过？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
