ページ内リンクがちゃんと飛ばない(092)

内容が多くて長くなるページによく使われるページ内リンクですが、先日、表示して欲しい位置に設定しているのに、意図しない変な場所に移動してしまうトラブルに見まわれました。いろいろと調べてブラウザバグも疑いましたが、結局はHTMLの組み方が文法的に間違っていたミスでした。情けないですぅ(T_T)。何年、この仕事やってんだぁ?

原因は、同じブロック内に複数の<a id="***" name="***"></a>を置いたことによるミス

一つの<div>や<p>のブロックレベルの中に複数の<a id="***" name="***"></a>を置いてしまうのがNGでした。もちろん、id属性とname属性の値はそれぞれ変えていましたが、そういう問題ではないようです。具体的には下記の状態になっていました。

<div id="base">

<a id="111" name="111"></a>
<div id="contents111">
コンテンツ111
</div>

<a id="222" name="222"></a>
<div id="contents222">
コンテンツ222
</div>

</div>

<div id="base">から見ると、<a>の中にはid="111"とid="222"の2つがあることになります。この状態がよろしくないのです。

正しくは、ページ内リンクを設定したいそれぞれの<div id="contents***">の中に<a id="***" name="***"></a>を置きます。こうすると、どの<div id="contents***">に飛んでいけばいいのか明確になり、正しく移動するようになります。

<div id="base">

<div id="content111">
<a id="111" name="111"></a>
コンテンツ111
</div>

<div id="content222">
<a id="222" name="222"></a>
コンテンツ222
</div>

</div>

IE6には<br />を使った便利なバグ(?)あり

今回の問題解決を図るにあたって、ネット検索をしたらすぐに出てきたのが、IE6の場合、<a id="***" name="***"></a>の直前に<br />を置くと、その位置にちゃんと飛ぶようになる、というもの。

<div id="base">

<br />
<a id="111" name="111"></a>
<div id="content111">
コンテンツ111
</div>

</div>

でもこれはIE6にしか効果がないバグ(?)のようなので、今後は使わないようにした方がいいですね。これは動作確認しまして、IE6はOKでしたが、IE7とFirefoxでは移動しませんでした。

謝辞

この問題解決は、会社のHTMLコーディング技術者がやってくれました。ありがとうKさん!これからも助けてね。今度、ランチをおごろう。

ウェブページ

Powered by Movable Type 5.2.7