ページをスクロールして下へ移動すると、
ページの右下に出現する「ページのトップに戻るボタン」。
クリックすると、スクロールしながらページのトップに戻ってくれる、
縦に長いサイトには便利だと思う機能です。

ダウンロード

まず、↓サイトから
jquery.js
http://jquery.com/

scrolltopcontrol.js
http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm
をダウンロードさせていただきます。

JavaScript記述

実装したいページに

<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>
</head>

と記述。

表示される画像に関しては、

controlHTML: '<img src="up.png" style="width:48px; height:48px" />',

と書かれている部分をいじれば変更可能。

以上でとりあえず実装完了です。

カスタマイズ

いくつか設定が変えれるので、一応メモ。
「scrolltopcontrol.js」ファイルの、

    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}

    controlattrs: {offsetx:15, offsety:15}

という部分をいじればOK。
具体的には、

startline どれだけスクロールしたらボタンが現れるかを指定。数値が大きいほど、より下までスクロールしてから現れます。
scrollto 0か文字で戻り先を指定(初期設定では0=top)。
任意の戻り先(id)も指定できます。
例えば,

の位置に戻したい場合、
scrollto:’pagetop’
というように記述。
※「#」は不要。設定値の文字は必ずシングルクオーテーション「’」でくくる。
scrollduration スクロールの所要時間。数値が大きいほど戻るのに時間が掛かります。
fadeduration ボタン画像のフェードイン/アウトの所要時間。「イン,アウト」でそれぞれ指定。
数値が大きいほど表示/非表示に時間が掛かります。
offsetx/offsety ボタン画像の位置を指定。
offsetx:ウィンドウ右端からの距離
offsety:下からの距離
数値が大きいほどウィンドウの内側になります。

参考サイト

jQueryで、ぬるっとスクロールしながらページのトップに戻る機能を実装する。