锚链接降落在错误的位置

问题描述 投票:12回答:5

可能是一个愚蠢的问题,但老实说,我无法解决这里发生的问题。

http://harrisonfjord.com/thinkinc/

目前正在建立的网站。我想在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中运行。关于我在这里做错了什么的任何想法?

干杯!

html hyperlink position anchor
5个回答
13
投票

我认为问题是由锚点引起的,没有使用任何内容。

[而且,似乎name=已作为deprecated in favorid=作为某些元素(包括A)中的片段标识符,这在某种意义上是有意义的,因为ID属性是唯一的,而NAME属性却不能得到保证。

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

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

看看哪里能带给您。顺便说一句,它看起来像是一个不错的会议,希望您能获得入场券。


8
投票

我在Firefox中遇到了完全相同的问题,并用此方法解决了这个问题(与简单的答案相同,但更为通用-它检测到网址中是否存在锚点并滚动到它):

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


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

1
投票

我不知道您的页面试图遵循什么标准,但其中充满了错误:

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

您应该很高兴该网站完全渲染。


0
投票

我用技巧解决了这个问题,我在div开始前放置了一个空的span元素,并带有所需的ID

<span id="sponsors">&nbsp;</span>

<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>
© www.soinside.com 2019 - 2024. All rights reserved.