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


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



人気の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を表示する方法
PukiWikiで表をソートしたい PukiWikiで表をソートしたい
目に楽しい便利な機能!jQueryでページトップヘスムーススクロール WordPressに「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう
目に楽しい便利な機能!jQueryでページトップヘスムーススクロール PukiWikiのサイドメニュー上部にAdsense広告を設置

おすすめの記事

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設定をしよう

コピペから脱出!iptablesの仕組みを理解して環境に合わせた設…

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

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

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザインの作り方

これ以上ないくらい簡単な例から学ぶ、レスポンシブwebデザイン…

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

iptablesで設定したパケットフィルタリングが正しく動作しているかテスト

iptablesで設定したパケットフィルタリングが正しく動作してい…

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

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

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…

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

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


コメントを残す

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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください