Question

可能是一个愚蠢的问题，但老实说我无法理解这里出了什么问题。

我正在建设的网站。我想在http://harrisonfjord.com/thinkinc/index.php#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中运行。我对这里做错了什么想法？

干杯！

Answer 1

我认为问题是由没有您正在使用的内容的锚点引起的。

此外，name= id= A的{{1}}似乎是某些元素（包括<h2 id="sponsors">Sponsors</h2>）中的片段标识符，因此ID属性具有一定意义是唯一的，而NAME属性不是那么保证。

我会尝试将片段标识符粘贴在实际的可渲染实体中，例如：

{{1}}

并查看它的位置。顺便说一下，它看起来像是一个很好的会议，我希望你得到一个comp录取。

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

Answer 3

我在iphone中遇到了有碎片链接的问题 <a href="#info">TYPES OF INFORMATION WE COLLECT</a>，正确链接到 <h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>。

这不能正常工作，我修复了这样的解决方案（使用jQuery）：

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

Answer 4

我不知道您的网页尝试遵循的标准，但它充满了错误：

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

您应该很高兴网站呈现。

Answer 5

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

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

锚链接落在错误的位置

5 个答案: