トップへ戻るアンカーを付けよう

ページの最後にトップへ戻るためのアンカーやボタンがあると便利です。
特にblogなどは内容量もたくさんあり、多くスクロールをするので、ユーザビリティのために是非付けてみましょう。
この場合、ページ内リンクと呼ばれるリンクにすると便利です。

トップへ戻る用のアンカーもしくはボタンは以下のようなhtmlソースを書きます。
<a href="#TOP">トップへ戻る</a>

#TOPのTOPは任意の英数字を入れます。
IDみたいなものだと考えてください。

そして戻り先つまりページのトップは、この場合、<body>タグの下になります。
<html>
<head></head>
<body>
<a name="TOP"></a>
内容
</body>
</html>

ここのTOPは先ほどのIDと同じにしてください。
また、<a name="TOP"></a>は中身が空になってしまうので、最近では<div>で囲んだのもよく見ます。

<html>
<head></head>
<body>
<div id="TOP">
内容
</div>
</body>
</html>

余談ですが、<a href="#TOP">トップへ戻る</a>をID（アンカー名）を記述せずに<a href="#"></a>と書くだけでページのトップに戻ることが出来ます。
ただし、Operaでは効かないので注意してください。
WindowsのIE6、Firefox、NNの最新バージョンでは有効です。
投稿日:2006年10月16日
« 前の記事 | webコラムのトップへ | 次の記事 »

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

最近のコラム

top