目次

001 スムーススクロールを実装する
- 概要

001 スムーススクロールを実装する

概要

jQueryを使って、画面スクロールボタンを設置してみます。

設置方法

Dynamic Drive DHTML scripts- jQuery Scroll to Top Controlにアクセスして、scrolltopcontrol.jsをダウンロードします。
同ファイルを「js」フォルダに移動します。
サイトから“up.png”をダウンロードするか、自分で「up.png」を用意して「image」フォルダに移動します。

scrolltopcontrol.jsの編集

11行目で動作を調整できます。

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

startline どれだけスクロールすればボタンを表示するか。
scrollto どこまでスクロールするか。0でトップページまでスクロールします。
scrollduration スクロールスピード。
fadeduration 画像のフェードインアウトの間隔。
12行目の「up.png」イメージのパスを「image/up.png」に変更します。
13行目でイメージの位置調整できます
controlattrs: {offsetx:5, offsety:5},

スクリプトの読み込み

「skin」フォルダにある「pukiwiki.css.php」を開いて「<head>」タグに以下を追記します。
- <script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
- <script type=“text/javascript” src=“js/scrolltopcontrol.js”></script>

これでブラウザの右下にスクロールボタンが表示されます。