#を使ったページ外特定箇所へのリンクについて - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

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

法人・ビジネス ホームページ・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ではリンク先がずれてしまいます。

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

<a name="AAA" id="AAA"></a>

【ケース1】<div id="AAA"></div>
【ケース2】<a id="AAA"></a>

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

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

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

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

補足

2012/02/17 23:14

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

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


こちらが正しいものとなります。
<a name="リンク先名" id="リンク先名"></a>

【ケース1】<div id="リンク先名"></div>
【ケース2】<a id="リンク先名"></a>

宜しくお願い致します。

matumatukodomoさん ( 東京都 / 男性 / 35歳 )

回答:1件

井上 みやび子

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

- good

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

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

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

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

図解しますと...

■表示A(期待?)
---------------------ウィンドウ上端
アンカー位置先頭



ページ末尾



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



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



アンカー位置先頭



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


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

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

ブラウザ

評価・お礼

matumatukodomoさん

2012/05/20 07:31

おとくなりましたが、ご回答ありがとうございました。

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

グーグル検索結果での問題点について matumatukodomoさん  2011-08-06 03:23 回答4件
PHP&MySQLによる会員制サイトの構築について こつこつがんばさん  2014-05-01 18:22 回答1件
CSSでの文字指定について tcnさん  2013-04-10 09:24 回答2件
同義語とSEO対策について とも探偵さん  2012-09-13 03:17 回答1件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページ(SEO対策)診断

貴社ホームページのSEO対策を診断します

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

その他サービス 格安ホームページ制作
中沢 伸之
(Webプロデューサー)