jQueryを使ってスムーズな動作でページTOPまで移動してくれるWordPressのプラグイン一覧

投稿日
2013年4月12日
最終更新日
この記事のカテゴリ
CMS / ワードプレス他
この記事に付けられたタグ
, ,

ボタンクリックでページの上部まで一気にスクロールしてくれるワードプレス用のプラグインをまとめました。

サイトの右下などに「▲」とか「TOPへ」のボタンで表示されている、一気にページ上部まで移動してくれるアレです。

ページ内で「a href」と「#」を使った任意の位置へのスムーズスクロールについてはこちらの記事にあるプラグインをで実現できます。

各プラグインを実際に使用しているサイトをリンクしているので、スクロールの動作なども確認しながら比較できます。

Smooth Page Scroll to Top
Smooth Page Scroll to Top
動作確認(45395.org) ｜ ダウンロード

インストール＆有効化ですぐに表示されます。
設定項目はありませんが、丸くて可愛らしいボタンで動作も問題ありません。
ただ初期状態だとボタンが右端から100px、下から50pxにあり、なんか中途半端な位置です。
これを修正するにはプラグインフォルダ内の「smooth_scroll.css」を編集します。
ファイル内の「bottom:50px;」「right:100px;」の部分の数値をそれぞれ「15px」に変更すると右下の端に表示されるようになります。

Ultimate Back To Top Button
Ultimate Back To Top Button
動作確認(coffee.gallery.cx) ｜ ダウンロード

テキスト変更やボタン位置、カラーなどが設定可能です。

Smooth Scroll Up
Smooth Scroll Up
動作確認(free-domain.gallery.cx) ｜ ダウンロード

左メニュー「設定」「Scroll Up Options」から設定します。
ボタンの表示形式をボタン・タブ・テキストから選べます。

テキストでリンクの「Scroll Up Options」を日本語で表示したい場合はプラグインファイルを変更します。
「smooth-scroll-up/js/jquery.scrollUpScript.js」
このファイル10行目付近

これを変更したい場合は、FTPからは下記のファイルをダウンロードして修正＆アップロード。
「/wp-content/plugins/smooth-scroll-up/js/jquery.scrollUpScript.js」
（テーマ編集からは「smooth-scroll-up/js/jquery.scrollUpScript.js」）

このファイルの10行目付近にある「Scroll to top」を任意のテキストに変更して上書きします。

Scroll Top and Bottom
Scroll Top and Bottom
動作確認(fukui-ramen.com) ｜ ダウンロード

動作確認先サイトは都合により現在別のプラグインを使っています

ボタンが2つで上下にスクロールが可能。
インストール＆有効化後、「設定」「Scroll Top-Bottom」に設定項目があります。

WP To Top
WP To Top
動作確認(muryou-domain.com) ｜ ダウンロード

古くからあるプラグインで以前は多くのブログで使われていたようです。
しかしプラグインのアップデートが数年行われていません。
設定は多くはありませんができます。

WD3K Go Top Down
WD3K Go Top Down
動作確認(niconama.org) ｜ ダウンロード

上下両方のボタンが付いていて、どちらにも自動スクロールできます。
設定項目はありません。

Dynamic “To Top” Plugin
Dynamic “To Top” Plugin
動作確認(themes.gallery.cx) ｜ ダウンロード

左メニューの「外観」「To Top」から設定ができます。
とても詳細に設定が行えますのでがっつりカスタムしたい方におすすめです。

Ax ScrollTo Top
Ax ScrollTo Top
動作確認(protein.gallery.cx) ｜ ダウンロード

キャラクターのアイコンなどが用意されていて選んで使えます。
大きさや位置調整も可能。

Scroll Up
Scroll Up
動作確認(sabotenn.org) ｜ ダウンロード

とても小さいボタン、あまり目立たせたくないときなどに。

初期の状態だとボタン画像へのパスが間違って記述されており、表示されませんので(現バージョン)プラグインファイルを編集します。
「jquery-scrollup/scroll-up.php」の67行目付近にある
「/scroll-up/jquery-scroll-up/arrow_up.png」
この部分を
「/jquery-scrollup/jquery-scroll-up/arrow_up.png」
に書き換えて上書きします。
これでボタンが表示されるようになります。

ScrollTo Top
ScrollTo Top
動作確認(wordpress.gallery.cx) ｜ ダウンロード

設定項目は少ないですが、ボタンの画像を自身で用意したものをアップロード＆利用できます。

jQuery Smooth Scroll
jQuery Smooth Scroll
動作確認 ｜ ダウンロード

都合により閉鎖しました

シンプルに設定不可でボタン1つ。動作は速めです。

ToTop Link
ToTop Link
動作確認(cheese.gallery.cx) ｜ ダウンロード

有効化したら「設定」「ToTop」にある「Enabled」にチェックで動作します。
ボタンの位置を変更したりアップロードした画像が使えます。

jcwp scroll to top
jcwp scroll to top
動作確認(tumblr.gallery.cx) ｜ ダウンロード

ひょこっと右下から出現してくるかわいい動作。
テキスト変更はもちろん、動作や位置やカラーまで設定できます。

Go To Top
Go To Top
動作確認(準備中) ｜ ダウンロード

スクロールスピードやスクロールのエフェクト、テキスト変更などが可能です。
インストール＆有効化し、左メニュー「設定」「Go To Top」にある「Enable」にチェックを入れて動作させます。

Scroll To Top
Scroll To Top
動作確認(準備中) ｜ ダウンロード

画面下の中央にボタンが表示されます。
テキスト編集やカラー変更、幅が設定できます。

ボタン表示位置を変更したい場合はこちら「「Scroll To Top」のボタン位置を変更する方法」をご覧下さい。

Cudazi Scroll to Top
Cudazi Scroll to Top

動作確認(kw-note.com) ｜ ダウンロード

このブログで使っているプラグインです。
設定もなく有効化ですぐに使えます。

都合により現在別のプラグインを使っています

以上です。
プラグインが動作してくれないときは、他に使用しているプラグインだったり、テーマに書かれているスクリプトなどと競合している可能性があるので違うスクロールプラグインを選ぶか、競合しているっぽいプラグインを停止しながら原因を特定する必要があります。

他の原因としてはテーマファイルの「head.php」と「footer.php」にそれぞれ以下のコードが記述されていない場合も動作しない事があります。

  • <?php wp_head(); ?>
  • <?php wp_footer(); ?>
このエントリーをはてなブックマークに追加
LINEで送る
Pocket

関連記事

コメントを書き込む

コメントは承認後に公開されます。メールアドレスは公開されません。
「*」は必須項目です。