人気のjQueryを使って、PukiWikiにうにょーんと動くスムーススクロールを設置します

はじめはトイレのウォシュレットみたいで「スクロールくらい自分でするわ！」とか思ってましたが、使い慣れると「なんだ、ここページトップに移動する機能ないの？不便だな～」と、なるから不思議です。
大手のニュースサイトにも導入されるなど、どうやら市民権も得たようなので設置しました。

この記事ではPukiWikiに設置しますが、WordPressでもMovable Typeでも、普通のHTMLでも同じように動きます。

動作に不満があったため、現在は別のものを設置しています。
WordPress用ですが基本的な設置方法は変わらないので、「WordPressに「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう」をご覧ください。

設置方法

特にPukiWikiだからといって特別な設定が必要ということもありません。
　
1.まずは必要なファイルをダウンロードします。
「jQuery Scroll to Top Control v1.1」にアクセスして「scrolltopcontrol.js」をダウンロードします。
同ファイルを「skin」フォルダに移動します。
　
2.上のサイトから「up.png」をダウンロードするか、自分Webサイト専用の「up.png」を用意して、「image」フォルダに移動します。

デフォルトだと以下のような画像です。

今回はサイトの雰囲気に合わせて以下の画像を用意しました。

　
3.画像の場所に合わせて、12行目イメージのURLを「image/up.png」に変更してください。
　
4.動作を調整します。
「scrolltopcontrol.js」の11行目

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

「startline:100」で、どれくらいスクロールしたらUP用の画像を表示するか。
「scrollto: 0」で、戻るページトップからの距離を指定します。0で一番上までという指定です。
「scrollduration:100」で、スクロールするスピード。
「fadeduration:[500, 100]」で、画像のフェードイン・アウトの時間を指定できます。
　
13行目の以下の数値を変更すると右下からの位置を指定できます。

controlattrs: {offsetx:20, offsety:20},

　
59行目で画像にマウスオーバー時のテキストを変更できます。

.attr({title:'Scroll Back to Top'})

　
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="skin/scrolltopcontrol.js"></script>

以上で設置完了です。

~~サンプルは「アクアリウムWikiのトップページ」をご覧ください。~~