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

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

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

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

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

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

Dynamic “To Top” Plugin

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

ダウンロード: Dynamic “To Top” Plugin
動作確認ページ: テーマギャラリー（http://themes.gallery.cx/）

Scroll To Top

テキストの変更やボタンの色、横幅などが設定できます。
インストール後の初期の状態だとボタンが画面の真ん中にでてきますが、調整する事ができます。
方法はこちら「WordPressのページスクロールプラグイン「Scroll To Top」のボタン位置を変更する方法」

ダウンロード: Scroll to Top
動作確認ページ: 準備中です

Cudazi Scroll to Top

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

ダウンロード: Cudazi Scroll to Top
動作確認ページ: キーワードノート（http://kw-note.com/）

jcwp scroll to top

下にスクロールすると「もこ」っと出現してくるユニークな動作。
上に戻ると同じ動作で隠れてくれます。

ダウンロード: jcwp scroll to top
動作確認ページ: Tumblrテーマギャラリー（http://tumblr.gallery.cx/）

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
動作確認ページ: ニコ生ガイド（http://niconama.org/）

ScrollTo Top

ボタンの位置やスピードなど、項目は少ないですが必要最低限の設定は可能。
ボタン画像は用意されているものから選ぶか自分でアップロードも出来ます。

ダウンロード: ScrollTo Top
動作確認ページ: WordPressテーマギャラリー（http://wordpress.gallery.cx/）

ToTop Link

ボタンの位置変更やアップロードした画像を使えたりできます。
設定にある「ToTop」から「Enabled」にチェックを入れ動作させてください。

ダウンロード: ToTop Link
動作確認ページ: チーズの種類まとめ（http://cheese.gallery.cx/）

WP To Top

ワードプレスでスクロール系プラグインといえばこのプラグインの名前が挙がる事が多いのではないでしょうか。
人気もありますが、しばらく更新が止まっています。
ボタンのカラー、テキスト、位置(左右)のシンプル設定。

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

Ultimate Back To Top Button

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

ダウンロード: Ultimate Back To Top Button
動作確認ページ: Coffeeギャラリー（http://coffee.gallery.cx/）

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」で通常のページ内リンクを作ります。
サンプルコードです。

～～～～～～～～～～～～～～～

<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

すぐ上の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
動作確認ページ: 試行錯誤（https://45395.org/cms/wordpress/coresever-to-xserver/）

jQuery Smooth Scroll

準備中

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

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

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

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
動作確認ページ: 試行錯誤（https://45395.org/）

Scroll Top and Bottom

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

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

Go To Top

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

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

jQuery Smooth Scroll

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

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

Ax ScrollTo Top

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

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

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にはこれ