ページの上部へ戻るボタン
いろいろなWebサイトを見ていると、ページの下のほうに「ページの上部へ戻る」とか「このページのTOPへ」というボタンを見かけたことはありませんか？
このサイトにも配置してあるのですが、ページの上部へ戻ることができるボタンがあるのと、無いのとでは、サイトの見やすさがかなり違います。
特に、ブログ等の縦に長いようなページでは、記事を読み終わった後に、他の記事を読もうとした場合など、特にナビゲーション部分が上部に配置されている場合などは、いちいちスクロールして上まで戻らなくてはいけません。
こういった、ページの下部から上部へのスクロールの手間を省くのが「ページの上部へ戻るボタン」です。
ページの上部へ戻るボタンの作成方法
それでは、ページの上部へ戻るボタンはどのように配置するのかということを解説したいと思います。
答えを簡単に言うと、id属性か、name属性を使用するだけなのですが、もう少し詳しく解説してみようと思います。
一般的なブログサービス等にはたいてい最初からあるのですが、ブログのテンプレート上部、<body>タグのすぐ下辺りに、
<div id=”○○○○”>
このようなものや、
<a name=”○○○○”>
このようなタグがあるかと思います。
これが、その場所の名前となっているので、この場所の名前まで戻すという設定をします。
<a href=”#○○○○”>ページの上部へ戻る</a>
このようなタグをページの下辺りに配置すると、「○○○○」の名前の部分まで戻ることができるので、結果的に、ページの上部へ戻ることができるボタンが配置できます。（#を付け忘れないようにしてください。）
この応用で、ページ内にid属性やname属性で、色々な場所（例えば、コメント欄やトラックバック等）に名前をつけると、ページ内を自由自在に飛ぶ事ができます。