目に楽しい便利な機能!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行目

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

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

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

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

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

 
5.skin」フォルダにある「pukiwiki.css.php」を開き、「<head>」に以下のコードを追加します。

1
2
<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広告を設置

おすすめの記事

メールのエラーコードと、メールサーバのmaillog解析方法まとめ

メールのエラーコードと、メールサーバのmaillog解析方法まとめ

エンティティとデコード用プラグイン「Entity Decode Button」を作成しました

エンティティとデコード用プラグイン「Entity Decode Button」…

Linuxの基本の基本。Linuxの基本的なディレクトリ構成

Linuxの基本の基本。Linuxの基本的なディレクトリ構成

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデ…

初心者でも安全なLAMP環境を構築する方法を解説

初心者でも安全なLAMP環境を構築する方法を解説

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

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

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

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

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

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


コメントを残す

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

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