人気の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のトップページ」をご覧ください。