====== 001 スムーススクロールを実装する ======
===== 概要 =====
jQueryを使って、画面スクロールボタンを設置してみます。
==== 設置方法 ====
* [[http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm|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」を開いて「」タグに以下を追記します。
*
*
これでブラウザの右下にスクロールボタンが表示されます。