スクロールについてくる「上へボタン」:jQuery
最終更新日:
ページをスクロールして下へ移動すると、
ページの右下に出現する「ページのトップに戻るボタン」。
クリックすると、スクロールしながらページのトップに戻ってくれる、
縦に長いサイトには便利だと思う機能です。
ダウンロード
まず、↓サイトから
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で、ぬるっとスクロールしながらページのトップに戻る機能を実装する。
JavaScriptのおすすめ参考書
ポチップ
ポチップ