Daily happenings, XHTML, CSS, MT, WP, Web, a memo, etc…

スクロールをスムーズに

ユーザビリティーを考慮して、「ページのトップへ戻る」ボタンやテキストを設置するサイトが増えています。
miyalogでも設置しているのですが、ページ内リンクは、一瞬で移動させてしまうと、何処へ移動しているのか分かりにくいため、スクロールをスムーズにしてくれる「tinyscrolling」というJavaScriptを使用しています。

ダウンロード

tinyscrollingから「Download the script with sample (.zip)」をダウンロードし、解凍したのちフォルダごとサーバーへアップします。

使用方法

<head>~</head>内に外部JavaScriptを呼び出すソースを記述し、ページ内リンクを設定します。

<script type="text/javascript" src="tinyscrolling.js"></script>

リンク先は、nameは使用不可なので、idで指定します。

<a href="#header" title="ページのトップへ">Back To Top</a>