スクロールについてくる「上へボタン」：jQuery

2011-04-06 JavaScript

最終更新日：2011-06-18

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

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

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

実装したいページに

<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}

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

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