10-07-10
ページをスクロールするとトップへ戻るボタンが出現する「scrolltopcontrol.js」
demo
下のほうへスクロールしてみてください。ページ右下に上向きの矢印が出現するのでレッツクリック。レッドクリフに見えた。
memo
作業内容
フッター部分に「トップへ戻る」ボタンというのはよく見かけますが、このサイトにはありません。個人的にあのボタンを押すことがほぼ無いんです。が、別にあるとイヤなわけでもないので試しに置いてみます。
ページを読み進める（スクロールする）と、トップへ戻るボタンがウィンドウの右下にじんわり出現するjQuery Scroll to Top Controlを使ってみます。クリックするとスクロールしながらトップへ戻ります。
--- head内にjQueryとscrolltopcontrol.jsを読み込む ---
<script type="text/javascript" src="../common/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/100710/scrolltopcontrol.js"></script>
--- scrolltopcontrol.js内のボタン画像の設定を変更する（12行目くらい） ---
controlHTML: '<img src="img/100710/img_gotop.png" style="width:13px; height:25px" />'基本はこれだけで動作しました。あとはスクロールするスピードや、ボタンが表示される地点のカスタマイズも可能です。
--- scrolltopcontrol.jsの設定をいじる（11行目、13行目くらい） ---
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}
controlattrs: {offsetx:5, offsety:5}startlineはボタン表示位置（数値大でより下へ）、scrolltoは戻るポイント（id名の設定も可能：scrollto: 'top'みたいな）、scrolldurationは戻るスピード（数値大でより遅く）、fadedurationはボタン画像のフェードイン／アウトの時間（数値大でより遅く）、offsetx・offsetyはボタン表示位置（数値大でより内側へ）になります。