2013年04月08日(月)

ページのトップまでスムーズにスクロールしてくれるワードプレスのjQueryプラグインまとめ&比較

ページの右下などにあるボタンを押すことで、ページの上部までスムーズに自動で戻ってくれる(スクロール)機能を実現してくれるワードプレスのプラグインをまとめました。
実際に導入しているサイトもリンクしてあるので、動作を確認しながら比較・検討出来ます。

画像を綺麗な動作で拡大してくれるプラグインの比較している記事もあるので、よかったらご覧下さい。

最近はPCサイトですと文字やスペースを大きく使うデザインが増えてきていますし、レスポンシブに対応したテーマだとスマートフォンからはかなり縦長なレイアウトになりますので、このようなプラグインは導入しておきたいところです。

どんなプラグインをインストールしても使えない場合はこれをご確認下さい。
プラグインが動作しない場合(下に移動します)

検索で探すときは「ScrollTo Top」や「Scroll To Top」のようにほとんど同じ名前で違うプラグインもありますのでご注意。

Dynamic “To Top” Plugin
Dynamic “To Top” Plugin
ボタンサイズやカラー・形状、スクロールするスピード、表示する位置などの非常に細かい設定が可能です。
設定は左メニュー「外観」にある「To Top」という項目から行えます。

ダウンロード
Dynamic “To Top” Plugin
動作確認ページ
テーマギャラリー(http://themes.gallery.cx/)
Scroll To Top
Scroll To Top
テキストの変更やボタンの色、横幅などが設定できます。
インストール後の初期の状態だとボタンが画面の真ん中にでてきますが、調整する事ができます。
方法はこちら「WordPressのページスクロールプラグイン「Scroll To Top」のボタン位置を変更する方法

ダウンロード
Scroll to Top
動作確認ページ
準備中です
Cudazi Scroll to Top
Cudazi Scroll to Top
プラグインダウンロード&有効化ですぐに使えます。
設定は出来ませんが(現バージョンの時点)、動作もスムーズで変更する必要もないくらいのシンプルさ。

ダウンロード
Cudazi Scroll to Top
動作確認ページ
キーワードノート(http://kw-note.com/)
jcwp scroll to top
jcwp scroll to top
下にスクロールすると「もこ」っと出現してくるユニークな動作。
上に戻ると同じ動作で隠れてくれます。

ダウンロード
jcwp scroll to top
動作確認ページ
Tumblrテーマギャラリー(http://tumblr.gallery.cx/)
Scroll Up
Scroll Up
設定はできませんがシンプルな見た目&動作。
インストールしてもボタンの画像が表示されません(現バージョン)が、以下の方法でボタン画像へのパスを修正してあげる事で表示できます。

ワードプレスの管理画面にあるプラグイン編集か、FTPからこのプラグインの「scroll-up.php」というファイルを編集します。
詳細な場所はここ:/wp-content/plugins/jquery-scrollup/scroll-up.php

ファイル内67行目付近にこのような記述があります。

echo '<script type="text/javascript">$.scrollUp({image_src: \'' . plugins_url('/scroll-up/jquery-scroll-up/arrow_up.png') . '\'});</script>';

このpngファイルのパスを正しく修正します。

「/scroll-up/jquery-scroll-up/arrow_up.png」をこう書き換えます。

/jquery-scrollup/jquery-scroll-up/arrow_up.png

これでボタンが表示されるようになります。

ダウンロード
Scroll Up
動作確認ページ
サボテンまとめ(http://sabotenn.org/)
WD3K Go Top Down
WD3K Go Top Down

ページ下に常駐して、ページの上だけでなく下にもスクロールしてくれます。

ダウンロード
WD3K Go Top Down
動作確認ページ
ニコ生ガイド(http://niconama.org/)
ScrollTo Top
ScrollTo Top
ボタンの位置やスピードなど、項目は少ないですが必要最低限の設定は可能。
ボタン画像は用意されているものから選ぶか自分でアップロードも出来ます。

ダウンロード
ScrollTo Top
動作確認ページ
WordPressテーマギャラリー(http://wordpress.gallery.cx/)
ToTop Link
ToTop Link
ボタンの位置変更やアップロードした画像を使えたりできます。
設定にある「ToTop」から「Enabled」にチェックを入れ動作させてください。

ダウンロード
ToTop Link
動作確認ページ
チーズの種類まとめ(http://cheese.gallery.cx/)
WP To Top
WP To Top
ワードプレスでスクロール系プラグインといえばこのプラグインの名前が挙がる事が多いのではないでしょうか。
人気もありますが、しばらく更新が止まっています。
ボタンのカラー、テキスト、位置(左右)のシンプル設定。

ダウンロード
WP To Top
動作確認ページ
無料ドメインガイド(http://muryou-domain.com/)
Ultimate Back To Top Button
Ultimate Back To Top Button

オンマウスでボタンが拡大します。
ページの位置によってスクロールスピードが違います。

ダウンロード
Ultimate Back To Top Button
動作確認ページ
Coffeeギャラリー(http://coffee.gallery.cx/)
Smooth Scroll Links [SSL]
Smooth Scroll Links [SSL]

このプラグインは任意の場所へのページ内移動の動作をスムーズにしてくれるプラグインです。
「#」を使ったページ内リンクは、指定の位置まで一瞬で移動するためカクカク動作な印象がありますが、これで解決できます。
使い方はプラグインを有効化してから、左メニュー「設定」「Smooth Scroll Links [SSL]」に進み「Enable Smooth Scroll effect:」にチェックを入れてSave Settingsボタンをクリック。
その下にある「Add “Back to top” link at Footer”:」にチェックを入れると、「Back to Top ↑」というテキストがフッターに表示され、クリックするとページ上部まで戻ります。

あとは「#」と「id」で通常のページ内リンクを作ります。
サンプルコードです。

<a href="#list1">1のリンク</a>
<a href="#list2">2のリンク</a>

~~~~~~~~~~~~~~~

<p id="list1">1はここに到着</p>
<p id="list2">2はここに到着</p>

長い記事の頭に各項目へのリンクを貼っておく使い方がおすすめ。
上の画像のサイトの他にもこちら「キーワードノート」でも使っています。

プラグインファイルをいじってスクロールのスピードを変える事もできます。
「/wp-content/plugins/smooth-scrolling-links-ssl/smoothscroll.js」このファイルの最後から3行目にある「ss.STEPS = 25;」の数値を少なくすれば速くなり、大きくすれば遅い動作になります。

ダウンロード
Smooth Scroll Links [SSL]
動作確認ページ
TOPICK(http://topick.jp/goods/single-board-computers/)
Easy Smooth Scroll Links
Easy Smooth Scroll Links

すぐ上のSmooth Scroll Links [SSL]と同じく、ページ内のスクロールをスムーズな動作にしてくれるプラグインです。
プラグインの設定は特になく有効化するだけ。
動作もほぼ同じで、使い方も一緒でページ内リンクを作成するだけです。

上のSmooth Scroll Links [SSL]の青枠で囲まれたコードが使えます。

スクロールのスピードを変更する場合は
「/wp-content/plugins/easy-smooth-scroll-links/easy_smooth_scroll_links.js」の最後の行に記述されてるこの部分。

ss.STEPS=25;ss.addEvent(window,"load",ss.fixAllLinks);

数値を小さくすると速くなり大きくすると遅くなります。

ダウンロード
Easy Smooth Scroll Links
動作確認ページ
試行錯誤(http://45395.org/cms/wordpress/coresever-to-xserver/)
jQuery Smooth Scroll
準備中

こちらもページ内のスクロールをスムーズな動作にしてくれるプラグイン。

設定なしで有効化してすぐ使えます。キビキビした動作です。

ダウンロード
Easy Smooth Scroll Links
動作確認ページ
準備中
Smooth Page Scroll to Top
Smooth Page Scroll to Top

当サイトで使っているプラグインです。
設定はできませんが有効化ですぐに使えます。
動作もボタンのデザインもすっきりシンプルでいい感じなんですが、デフォルトのままだと右下に表示されるボタンがとても微妙な位置にあります。
右端からは離れすぎてますし下からも少し離れてます。
特にスマホから見てみると、画面中央より少し右側というあたり(レスポンシブのテーマ使用の場合)。

ボタンの位置を修正するにはプラグインファイルのCSSを変更します。

FTPからファイルをダウンロードして修正&アップする場合はこの場所
「/wp-content/plugins/smooth-page-scroll-to-top/files/smooth_scroll.css」

ワードプレスの管理画面から行う場合はプラグイン編集からこのプラグインの「smooth_scroll.css」というファイルから。

.scrollup {
	width:40px;
	height:40px;
	opacity:0.3;
	position:fixed;
	bottom:50px;
	right:100px;
	display:none;
	text-indent:-9999px;
	background: url('icon_top.png') no-repeat;
	outline: none !important;
}

この記述の「right:100px;」の部分をright:15px;に、「bottom:50px;」をbottom:15px;変更しました。

ダウンロード
Smooth Page Scroll to Top
動作確認ページ
試行錯誤(http://45395.org/)
Scroll Top and Bottom
Scroll Top and Bottom

ページ上部・下部両方のリンクが付きます。
インストール&有効化し、左メニュー「設定」「Scroll Top-Bottom」からボタンのカラーや矢印マークを選べます。

ダウンロード
Scroll Top and Bottom
動作確認ページ
福井ラーメンレポート(http://fukui-ramen.com/)
現在別のプラグインを使っています
Go To Top
Go To Top

インストール&有効化してワードプレス左メニュー「設定」「Go To Top」からテキストやスクロールのスピードからテキスト表示にするか記号の「▲」にするかなどが設定可能、Easeではスクロール時の動作も選べます。
「Enable」にチェックが入っていないと動作しません。

ダウンロード
Go To Top
動作確認ページ
準備中です
jQuery Smooth Scroll
jQuery Smooth Scroll

設定不可ですがそのまま使えるシンプルデザイン&機能。

ダウンロード
jQuery Smooth Scroll
動作確認ページ
TKドメイン取得ガイド(http://get-domain.tk/)
Ax ScrollTo Top

Ax ScrollTo Top

かわいいキャラやアイコンなどからボタンを選べます。
サイズや位置などの調整も可能です。

ダウンロード
Ax ScrollTo Top
動作確認ページ
プロテイン比較ガイド(http://get-domain.tk/)
Smooth Scroll Up
Smooth Scroll Up

テキスト・ボタン・タブのいずれかを選ぶ事ができます。
設定は左メニュー「設定」「Scroll Up Options」から行えます。

「Scroll Up Options」というテキストでリンクされますが、これを変更したい場合は、FTPからは下記のファイルをダウンロードして修正&アップロード。
「/wp-content/plugins/smooth-scroll-up/js/jquery.scrollUpScript.js」
(テーマ編集からは「smooth-scroll-up/js/jquery.scrollUpScript.js」)

このファイルの10行目付近にあるこの部分。

scrollText: 'Scroll to top', // Text for element

これの「Scroll to top」を好きなテキストに書き換えます。

ダウンロード
Smooth Scroll Up
動作確認ページ
フリードメインガイド(http://free-domain.gallery.cx/)

以上となります。
いっぱいあり過ぎて迷っちゃいますね。

以下のプラグインは導入に至らなかったものです。

WP-PageScroll
何ページ目にいるかを表示するページナビのリンクと、ページ上部・下部への両スクロールボタンが表示されます。
ページナビはいらないのとスペースも食うので見送りです。
プラグインインストールのページに書いてある説明には「Infinite Scroll」「WP-PageNavi」「jsScroll」をコンボしたプラグインだと説明されています。

プラグインが動作しないとき
どのプラグインを入れても全く表示されなかったり使えない場合は、テーマ編集からheader.phpファイルとfooter.phpファイルに以下のコードが入っているかを確認してください。

header.phpにはこれ
<?php wp_head(); ?>

このコードが<head></head>間にあればOK。

footer.phpにはこれ
<?php wp_footer(); ?>

このコードが</body>の直前にあればOK。

この2つのコードはワードプレスを正常に動作させるのに必ず記述するコードですが、時々これがないテーマがあるため確認してみて下さい。

導入してみたほとんどは動作するけど、たまに動作しないプラグインがある場合。
これは他のプラグインと競合している可能性があるので、別なのを選ぶか1つ1つプラグインを停止してみて動作をチェックしてみてください。

また、動作してるのに気付かない場合があります。
それはボタンがブログのコンテンツの下に隠れてしまっているとき。
そんな時はボタンに付けられているclassやidを見つけ、スタイルシートにz-indexで他のコンテンツより上に表示されるように指定してみて下さい。


コメントを残す

*」は入力必須項目


  • © 2010-2017 試行錯誤 All Rights Reserved.