スクロールすると現れる、上へボタン::jquery

ページをスクロールすると右下の方に現れてくる『戻る』ボタン。

やっぱり記事が長いページの場合には、あったほうが親切なように思います。

ということで実装方法など。

ダウンロード

実装したいページの<head>～</head>の部分に

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

ボタン画像の保存場所は、scrolltopcontrol.jsファイルの中に記述があります。

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

それぞれ設置したディレクトリーが間違えているとうまくごかないので、動かないときは先ずディレクトリを確認しましょう。

オプションの設定値について

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

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