ページ内でジャンプするリンクを作る

同じページ内でジャンプするリンクの作り方についてです。

特に縦に長いサイトなんかは、トップに戻るリンクなどがあった方がいいですね。
ユーザビリティの向上は、訪問別ページビューや固定読者の増加に繋がります。

まず、最上部に飛ばすリンクですが、これは結構簡単。

<p id="back-top">
	<a href="#top"><span></span>Back to Top</a>
</p>

これだけで、最上部へのリンクは機能します。

もし、右下などに固定して表示させたい場合は、position: fixedを、CSSで設定します。

#back-top {
	position: fixed;
	bottom: 30px;
	right: 50px;
}

bottomは下から30px、rightは右から80pxなんで、自分で調整して下さい。

また、これだけではテキストが浮いてるだけなんで、背景色を入れたり、枠を作ったりと、カスタマイズして下さいね。

任意の場所にnameで指定したリンクを置き、ジャンプするリンクを作る事も出来ます。

詳しくはこちらの参考リンクで。