目に楽しい便利な機能!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広告を設置

おすすめの記事

サーバの処理を自動実行するcronの仕組みと応用法

サーバの処理を自動実行するcronの仕組みと応用法

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単語200

今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単…

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

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

インストールだけじゃない!yumの設定から便利な使い方まで徹底的に解説

インストールだけじゃない!yumの設定から便利な使い方まで徹底…

ImageMagickをWindowsのXAMPPに導入する方法

ImageMagickをWindowsのXAMPPに導入する方法

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を作成しました

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を…

Web制作の仕組みを根底から覆すかもしれないWix ADIの人工知能

Web制作の仕組みを根底から覆すかもしれないWix ADIの人工知能

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

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


コメントを残す

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

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