为什么页面锚点有时会丢失？

发布于 2024-07-12 07:51:45 字数 642 浏览 9 评论 0 原文

在 HTML 页面上，像这样的链接：

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

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

<a name="pagelocation">

但根据我的经验，它有时会丢失 - 特别是从另一个页面链接时（例如 )。我所说的“未命中”是指它滚动到页面上的错误位置 - 也许接近，也许不是。

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

不然为什么会失败呢？它完全取决于布局吗？ 我该如何解决这个问题？

（我保留这个一般性的内容是因为我想要一个包罗万象的参考答案。）

更新 1

感谢您迄今为止有关非明确图像尺寸的指示。但是在所有元素都具有明确大小的页面上又如何呢？（我现在正在处理一个。）

原文

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.)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

峩卟喜欢 2024-07-19 07:51:45

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

编辑：任何其他可以改变页面布局的东西也应该被怀疑......这包括未在中加载的 javascript 和 CSS（不用介意所有 CSS 应该< /em> 被加载到头部；但并不总是如此）。

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

回复收藏 0 原文

歌入人心 2024-07-19 07:51:45

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

JS Solution

Run this function on document ready.

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

回复收藏 0 原文