名付けたフラグメントにリンクする

解決済

質問者：k_iwao
質問日時：2007/10/25 22:55
回答数：3件

ページの一番下にヘージトップに戻るボタンを作り、ヘージトップに戻るようにしたいのですが、Firefox・Opera・Safariでは飛べませんでした。互換性にも配慮して、a要素に同じ値のidとnameを併記しアンカーとしましたができませんでした。どなたかご存知の方がいらっしゃいましたら教えて下さい。よろしくお願い致します。

<head>
<style type="text/css">
.up {
text-align:right;
margin: 10px 10px 0px 20px;
}
</style>
</head>
<body>
★ページのトップです★

省略

<a href="#TOP_POINT"><img src="/up.gif" width="35" height="17" alt="UP"></a>

</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： himajin100000
回答日時：2007/10/26 04:33

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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>
★ページのトップです★
★ページのトップです★
★ページのトップです★
★ページのトップです★
★ページのトップです★
<form style="height:2000px;">
<input id="test" value="" />
</form>

<a href="#D1"><img src="/up.gif" width="35" height="17" alt="UP" /></a>
<a href="#D2"><img src="/up.gif" width="35" height="17" alt="UP" /></a>
<a href="#D3"><img src="/up.gif" width="35" height="17" alt="UP" /></a>
<a href="#D4"><img src="/up.gif" width="35" height="17" alt="UP" /></a>
<a href="#D5"><img src="/up.gif" width="35" height="17" alt="UP" /></a>
<a href="#"><img src="/up.gif" width="35" height="17" alt="UP" /></a>
<a href="Q3461387-1.html"><img src="/up.gif" width="35" height="17" alt="UP" /></a> 


テスト目的専用であり,
「わざわざフラグメントの内容を隠さなければならない,場合とはどのような状況なのか？」
ということを私の後学のため、補足・お礼してから使ってください。でないと怒りますよ(笑)

なお,上記のテストケースの通り,場所がトップだけであれば,#だけでいい・・・
HTML5では
http://www.html5.jp/trans/w3c_differences.html#c …
プレースホルダーリンクという考え方も導入されるようだが,俺はあまりこの考え方が好きではない

display:none;が適用された要素にはIE以外飛べないようです。

</body>

</html>

この回答への補足

早々のご回答ありがとうございます。
「わざわざフラグメントの内容を隠さなければならない,場合とはどのような状況なのか？」の件ですが、記入しそこなったのですが、bodyのスタイルシートにpadding:5px;と記載しており、ページの上部に5pxの空白があります。正確には5px内側に入ります。(みっちり上につけないため)
その為、body内のロゴやヘッダ部分などにidを付け飛ばすと微妙ではありますが、完全に上に行きません。
そこで、★ページのトップです★とすることにより、1番上までいくことができました。しかし、標記の問題が出てきてしまったのです。

・・・やっぱりdisplay:none;が適用された要素にはIE以外飛べないですか。

D2・・・私が行ったことと同じ役割。
D3・・・max-widthを使うと今度はIEに対応してなくなってしまう。
D4・・・visibility:hidden;で非表示にした場合にも、ボックス自体がなくなってしまうわけではなく空白ができてしまう。
D5・・・Firefoxにて、ページがスクロールしなくても表示できる場合、スクロールバーが出ず、テンプレートを固定センター寄せにすると、センターの位置がずれる現象を解決するために、overflow:scroll;を使用しているので、これも使えなそうです。
#・・・これのみの場合は一番理想的になるのですが、構文チェックを行うと、<A> のアンカー名が空です。と警告が出てしまう。

一応<body id="TOP_POINT">にするとできることを思い出したのですが、以前この方法で、何か不都合なことがあった気がするのですが、思い出せません。

補足日時：2007/10/27 00:05

通報する