目に楽しい便利な機能!jQueryでページトップヘスムーススクロール


投稿日:2012年3月12日
  • 0
  • 0


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


現在のページを共有する



現在のページに関連する記事

目に楽しい便利な機能!jQueryでページトップヘスムーススクロール 5段階評価を付けることができるjQuery Ratyプラグインの使い方
目に楽しい便利な機能!jQueryでページトップヘスムーススクロール PukiWikiで5段階評価を付けるプラグインを作成しました
PukiwikiでGoogle Analyticsを使う PukiwikiでGoogle Analyticsを使う
目に楽しい便利な機能!jQueryでページトップヘスムーススクロール Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法
目に楽しい便利な機能!jQueryでページトップヘスムーススクロール WordPressに「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう
PukiWikiで表をソートしたい PukiWikiで表をソートしたい
目に楽しい便利な機能!jQueryでページトップヘスムーススクロール PukiWikiのサイドメニュー上部にAdsense広告を設置

おすすめの記事

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wix 

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wi…

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスターの使い方

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスター…

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成

誤って削除したGoogle Chromeのブックマークを復元する方法

誤って削除したGoogle Chromeのブックマークを復元する方法

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

rsyslogを利用したログファイル作成と、logrotateを利用したログのローテーション

rsyslogを利用したログファイル作成と、logrotateを利用したロ…

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

最新のXAMPPをインストールし、安全・高速に運用する方法

最新のXAMPPをインストールし、安全・高速に運用する方法

「アマレコTV」でWindows 10のPC画面に表示されている動画を撮影する方法

「アマレコTV」でWindows 10のPC画面に表示されている動画を撮…


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。