#を使ったページ外特定箇所へのリンクについて

法人・ビジネスホームページ・Web制作 2012/02/17 23:14

#を使ったページ外特定箇所へのリンクについて質問です。

ページ内リンクと同様に、下記のような記述をしています。
しかしブラウザによっては、うまく遷移してくれません、、、
（移動場所がずれてしまいます）

現時点では下記のような記述をしています。
http://www.A.com/というトップページに
<a name="リンク先名" id="リンク先名"></a>
を設置。

外部のURLからこの場所にリンクさせるURLは下記のように記述しています。
<a href="http://www.A.com/#リンク先名">xxxxxx</a>

この場合だと、MacでFirefox,safari,google chromeは正常に稼働し、Winではgoogle chromeが正常に稼働しますが、IE9やSleipnirではリンク先がずれてしまいます。

そこで、ネットで調べ、下記の２パターンに変更し検証しましたが、挙動は変化なしでした、、、見事にずれました、、、

<a name="AAA" id="AAA"></a>
↓
【ケース１】<div id="AAA"></div>
【ケース２】<a id="AAA"></a>

特にIEで正常な動いて欲しい（指定した場所への遷移）のですが、とほうに暮れている状況です。

ジャバスクリプトの記述や、jqueryなどで解決するものなのでしょうか？
IE対策に何か良い手段はありませんか？

専門家の方、是非ご教示いただけますか。

何卒、宜しくお願い致します。

補足

2012/02/17 23:14

一ヶ所訂正させて頂きます。

>そこで、ネットで調べ、下記の２パターンに変更し検証しましたが、挙動は変化なしでした、、、
>見事にずれました、、、
><a name="AAA" id="AAA"></a>
>↓
>【ケース１】<div id="AAA"></div>
>【ケース２】<a id="AAA"></a>

こちらが正しいものとなります。
<a name="リンク先名" id="リンク先名"></a>
↓
【ケース１】<div id="リンク先名"></div>
【ケース２】<a id="リンク先名"></a>

宜しくお願い致します。

matumatukodomoさん（東京都 / 男性 / 35歳）

回答：1件

井上みやび子
Webエンジニア

ページが短いとアンカー付リンクの表示位置がずれる事があります

2012/04/02 14:08 詳細リンク

: (5.0)

始めまして。Webシステム開発を仕事にしております「すぐ使える株式会社」の井上と申します。
ご質問から遅くなりましたが、気になる点がありますのでご回答記入します。

移動位置がずれる、とのことですが、ブラウザによってはアンカー位置からページ末尾までの高さがウィンドウの高さより低ければ、ページの末尾をウィンドウの末尾に合わせた所に遷移します。
「ずれる」というのはこの状態ではないでしょうか？

図解しますと...

■表示A（期待？）
---------------------ウィンドウ上端
アンカー位置先頭

ページ末尾

---------------------ウィンドウ下端

■表示B（Windowsだとこのパターンの方が多いようですが...）
---------------------ウィンドウ上端

アンカー位置先頭

ページ末尾
---------------------ウィンドウ下端

この状態だとするとそもそもスクロールする余地がないので、ダミーのコンテンツを末尾に付け足してやらないとその位置に飛べないと思います。

なお、その他よくあるミスは、気が付かずに2箇所にアンカー（name, id）を指定してしまっていたりする場合があります。