锚点链接落在错误的位置

Question

可能是个愚蠢的问题，但老实说我真的想不通出了什么问题。

http://harrisonfjord.com/thinkinc/

这是我正在构建的一个网站。我想要在http://harrisonfjord.com/thinkinc/index.php#sponsors处设置一个锚点链接。我已经将锚点设置在以下代码中的"div id="sponsors"之前：

<a name="sponsors"></a>
    <div class="sponsors">
        <div class="sponsors-left">
            <h2>Sponsors</h2>
                <p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
            </div>

然而，当您点击锚链接时，它会定位到该div的中间位置。我原以为这可能是由于图像在锚链接加载后加载导致的问题，因此我手动为所有标记设置了宽度/高度。我还对标题栏中的cufon文本替换执行了相同的操作。

但是这些都没有帮助，所以现在我求助于您。由于某种原因，在Firefox中，锚点也无法正常工作。您认为我做错了什么吗？

谢谢！

- JVG

Answer 1

我认为问题是由于你使用没有内容的锚点导致的。

此外，似乎在某些元素（包括A）中，name=已经被弃用，推荐使用id=作为片段标识符，这是有道理的，因为ID属性是唯一的，而NAME属性则不能保证唯一。

我建议将片段标识符放在实际可呈现实体中，例如：

<h2 id="sponsors">Sponsors</h2>

试着去做，看看会有什么结果。顺便说一下，这是一个不错的会议，希望你能获得免费入场券。

- msw

---

啊哈！搞定了，太棒了，谢谢伙计。顺便说一下 - 我是会议组织者之一，不是网站开发人员！所以我不仅会参加会议，还会和演讲者们一起喝威士忌 :) - JVG

Answer 2

我在Firefox中遇到了完全相同的问题，并通过以下方法解决了它（与sasi的答案相同，但更通用-它会检测URL中是否有锚点并滚动到该锚点）：

$(document).ready(function() {
    if(window.location.hash.length > 0) {
        window.scrollTo(0, $(window.location.hash).offset().top);
    }
});

看起来这是一个众所周知的问题，请参见https://bugzilla.mozilla.org/show_bug.cgi?id=60307

- vard

---

这对我在使用目录JS片段的页面上有效。在许多遵循相同模式的页面中，只有一页，初始滚动没有考虑到TOC添加的文本。 - covener

谢谢@vard。我真的没有想到这个解决方案一直不起作用，直到我设置了一个最小延迟的计时器。现在在Mozilla中完美运行。if (window.location.hash.length > 0) { setTimeout(function() { window.scrollTo(0, $(window.location.hash).offset().top); }, 100); }再见。 - Alexandr Kazakov

Answer 3

我在iPhone上遇到了在链接中使用片段的问题，例如：

<a href="#info">我们收集的信息类型</a>，正确链接到 <h3 id="info">我们收集的信息类型</h3>。

但这并不能正常工作，我用jQuery找到了解决方法：

window.scrollTo(0,$('#info').offset().top);

- sasi

---

不错的解决方法：我使用它是因为 Firefox 第一次没有着陆在正确的位置，即在跟随带有片段的链接后，但在 Firefox 的地址栏中请求确切的 URL 可以使浏览器着陆在正确的位置。 - reallynice

Answer 4

我用一个技巧解决了这个问题，我在div之前放置了一个带有所需ID的空span元素和一个换行符。

<span id="sponsors">&nbsp;</span>
<br>
<div class="sponsors">
    <div class="sponsors-left">
        <h2>Sponsors</h2>
            <p>Support the lovely folks who support us! Visit their websites, join their mailing lists and peruse their wares. They are all highly-deserving of your custom, and we're thrilled to have each and everyone one of them on-board!</p>
    </div>
</div>

<a href="#sponsors">GO TO SPONSORS</a>

- crisc2000

Answer 5

我不知道你的页面试图符合哪个标准，但它充满了错误：

http://validator.w3.org/check?uri=http%3A%2F%2Fharrisonfjord.com%2Fthinkinc%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

其中一些错误非常严重，例如：

• 无法确定解析模式！
• 未找到DOCTYPE，且根元素未知。验证中止。

这些错误会导致验证器放弃验证。与像gnu.org这样的页面形成对比。

http://validator.w3.org/check?uri=www.gnu.org&charset=%28detect+automatically%29&doctype=Inline&group=0

你应该感到高兴，网站至少能够正常显示。

- msw

---

好的，我没有想到验证会影响到这种事情，所以本来打算之后再做。现在我会立即处理并报告是否仍然存在问题，谢谢！ - JVG

好的，回来了，现在修复了，验证为HTML 4.0 Transitional。然而，锚点仍然无法工作！有什么想法吗？ - JVG

Answer 6

我在滚动时遇到了一个问题，通过禁用Chrome中的开发工具面板，我解决了这个问题 :) 显然，当DevTools打开时，Chrome会错误地计算位置。

- Dzmitry Kulahin