- ベストアンサー
名付けたフラグメントにリンクする
- ページの一番下にヘージトップに戻るボタンを作り、ヘージトップに戻るようにしたいのですが、Firefox・Opera・Safariでは飛べませんでした。
- 互換性にも配慮して、a要素に同じ値のidとnameを併記しアンカーとしましたができませんでした。
- どなたかご存知の方がいらっしゃいましたら教えて下さい。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>Q3461287 TestCase 1</title> <style type="text/css"> .up { text-align:right; margin: 10px 10px 0px 20px; } #D2{ display:none; } #D3{ margin:0 -200px 0 -200px; max-width:100px; height:0px; } #D4{ visibility:hidden; height:0px; } #D5{ overflow:hidden; height:0px; } </style> </head> <body> <p id="D1">★ページのトップです★</p> <p id="D2">★ページのトップです★</p> <p id="D3">★ページのトップです★</p> <p id="D4">★ページのトップです★</p> <p id="D5">★ページのトップです★</p> <form style="height:2000px;"> <input id="test" value="" /> </form> <p class="up"><a href="#D1"><img src="/up.gif" width="35" height="17" alt="UP" /></a></p> <p class="up"><a href="#D2"><img src="/up.gif" width="35" height="17" alt="UP" /></a></p> <p class="up"><a href="#D3"><img src="/up.gif" width="35" height="17" alt="UP" /></a></p> <p class="up"><a href="#D4"><img src="/up.gif" width="35" height="17" alt="UP" /></a></p> <p class="up"><a href="#D5"><img src="/up.gif" width="35" height="17" alt="UP" /></a></p> <p class="up"><a href="#"><img src="/up.gif" width="35" height="17" alt="UP" /></a></p> <p class="up"><a href="Q3461387-1.html"><img src="/up.gif" width="35" height="17" alt="UP" /></a></p> <!-- input要素の内容が消える --> <p> テスト目的専用であり, 「わざわざフラグメントの内容を隠さなければならない,場合とはどのような状況なのか？」 ということを私の後学のため、補足・お礼してから使ってください。でないと怒りますよ(笑) <p> なお,上記のテストケースの通り,場所がトップだけであれば,#だけでいい・・・ HTML5では http://www.html5.jp/trans/w3c_differences.html#changed-elements プレースホルダーリンクという考え方も導入されるようだが,俺はあまりこの考え方が好きではない </p> <p>display:none;が適用された要素にはIE以外飛べないようです。</p> </body> </html>
その他の回答 (2)
- himajin100000
- ベストアンサー率54% (1660/3060)
>一応<body id="TOP_POINT">にするとできることを思い出したのですが、以前この方法で、何か不都合なことがあった気がするのですが、思い出せません。 多分それしかなさそう。
お礼
ですよね。 色々とありがとうございました。
- Suzi
- ベストアンサー率38% (130/334)
<a name="TOP_POINT">★ページのトップです★</a> と <a href="#TOP_POINT"><img src="/up.gif" width="35" height="17" alt="UP"></a> で、どうでしょうか。
補足
早々のご回答ありがとうございます。 「わざわざフラグメントの内容を隠さなければならない,場合とはどのような状況なのか？」の件ですが、記入しそこなったのですが、bodyのスタイルシートにpadding:5px;と記載しており、ページの上部に5pxの空白があります。正確には5px内側に入ります。(みっちり上につけないため) その為、body内のロゴやヘッダ部分などにidを付け飛ばすと微妙ではありますが、完全に上に行きません。 そこで、<p style="display:none" id="TOP_POINT">★ページのトップです★</p>とすることにより、1番上までいくことができました。しかし、標記の問題が出てきてしまったのです。 ・・・やっぱりdisplay:none;が適用された要素にはIE以外飛べないですか。 D2・・・私が行ったことと同じ役割。 D3・・・max-widthを使うと今度はIEに対応してなくなってしまう。 D4・・・visibility:hidden;で非表示にした場合にも、ボックス自体がなくなってしまうわけではなく空白ができてしまう。 D5・・・Firefoxにて、ページがスクロールしなくても表示できる場合、スクロールバーが出ず、テンプレートを固定センター寄せにすると、センターの位置がずれる現象を解決するために、overflow:scroll;を使用しているので、これも使えなそうです。 #・・・これのみの場合は一番理想的になるのですが、構文チェックを行うと、<A> のアンカー名が空です。と警告が出てしまう。 一応<body id="TOP_POINT">にするとできることを思い出したのですが、以前この方法で、何か不都合なことがあった気がするのですが、思い出せません。