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

おすすめの記事

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

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

5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成する方法

5段階評価プラグインを通して学ぶPukiWikiのプラグインを作成す…

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

日々の単純作業を自動化できるUWSCの使い方(入門・書式編)

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表示する方法

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表…

Google Fontsの日本語フォント「Noto Fonts」の使い方

Google Fontsの日本語フォント「Noto Fonts」の使い方

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

本気で作りたい人向け、WordPressプラグインの作成方法

本気で作りたい人向け、WordPressプラグインの作成方法

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

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


コメントを残す

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

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