web-dev-qa-db-ja.com

アンカーリンクが間違った位置に着陸する

おそらくばかげた質問ですが、正直なところ、ここで何が問題になっているのか頭を悩ませることはできません。

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でもアンカーが機能していません。私がここで間違ったことについて何か考えはありますか？

乾杯！

htmlhyperlinkpositionanchor
12
JVG

問題は、使用しているコンテンツのないアンカーが原因だと思います。

また、name=は 非推奨 of id=特定の要素（Aを含む）のフラグメント識別子として。これは、ID属性が一意であるのに対し、NAME属性はそれほど保証されていないため、一種の意味があります。

次のような実際のレンダリング可能なエンティティにフラグメント識別子を貼り付けてみます。

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

そしてそれがあなたをどこに導くかを見てください。ちなみに、いい会議のようですので、コンプ入場をお願いします。

12
msw

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 を参照してください。

8
vard

あなたのページがどの標準に準拠しようとしているのかわかりませんが、エラーがたくさんあります。

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

それらのいくつかは非常に深刻です、例えば：

  • 解析モードを判別できません！
  • DOCTYPEが見つからず、ルート要素が不明です。検証を中止します。

バリデーターが諦めること。 gnu.orgのようなページとは対照的

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

あなたはサイトがまったくレンダリングすることを喜ぶべきです。

2
msw

<a href="#info">TYPES OF INFORMATION WE COLLECT</a>があり、<h3 id="info">TYPES OF INFORMATION WE COLLECT</h3>に正しくリンクしているフラグメントを含むリンクについて、iPhoneで問題が発生しました。

それは正しく機能していませんでした、そして私はこのような解決策で修正しました（jQueryを使用して）：

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

私はこれをトリックで解決しました、私は必要なIDとdivの前に改行を持つ空のスパン要素を置きました

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