ページ内でのリンク(ジャンプ)をスムーズな動きでスクロールしてくれるワードプレスのプラグイン2つ

この記事のカテゴリ
CMS / ワードプレス他
この記事に付けられたタグ
, ,

ウェブサイトやブログのページ内で指定した位置へジャンプさせる方法は「id」でアンカーをつくり、「#」でリンクさせます。

昔から使われているHTMLですが、リンクを押したときの動作がなめらかでないというか、一気にその位置までガクっと移動します。
ページ内をどれくらい移動したのかもユーザーからはわかり難いですし、動きもきれいではありません。

リンクがこれ

<a href="#link1">1のリンクです</a>
<a href="#link2">2のリンクです</a>
<a href="#link2">3のリンクです</a>

アンカーがこれ

<p id="link1">1はここにジャンプしてきます</p>
<p id="link2">2はここにジャンプしてきます</p>
<p id="link2">3はここにジャンプしてきます</p>

そんなときに便利なのがjQueryを使ったワードプレス用のプラグイン「Easy Smooth Scroll Links」と「Smooth Scroll Links [SSL]」の2つです。

どちらかのプラグインをインストールして有効化すると上記にで書いたリンクはスムーズにページ内をスクロールで移動してくれます。
プラグインのインストール&有効化がわからない場合はこちら「WordPressのプラグインをインストールする方法3つ

試しにテストするにはこちら。
(Smooth Scroll Links [SSL]を使用してます)
移動した場所に、戻る用のリンクがあるのでクリックでここまで戻れます。
下までスクロールする

Easy Smooth Scroll Links
動作サンプルはこちら。
Easy Smooth Scroll Links

ダウンロードはこちら。
http://wordpress.org/extend/plugins/easy-smooth-scroll-links/

設定
このプラグインは設定がありませんので、有効化すればすぐに利用可能です。

プラグインファイルのコードを変更する事でスクロールのスピードを早くしたり遅くしたりも可能です。
このプラグインのフォルダにある「easy_smooth_scroll_links.js」というファイルの最後の行にあるこの部分。

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

ここの「25」の数値を小さくすれば速く、大きくすれば遅く動作します。

Smooth Scroll Links [SSL]
動作サンプルはこちら。
Smooth Scroll Links [SSL]

ダウンロードはこちら。
http://wordpress.org/extend/plugins/smooth-scrolling-links-ssl/

設定
左メニューの「設定」にある「Smooth Scroll Links [SSL]」に進みます。
「Enable Smooth Scroll effect:」にチェックを入れ、Save Settingsボタンをクリック。これで設定完了です。

その下にある「Add “Back to top” link at Footer”:」にチェックを入れると、ページの最下部に「Back to Top ↑」というテキストが追加され、押すとページ最上部までスクロールします。

スクロールのスピードを変えたいときはこのプラグインのフォルダにある「smoothscroll.js」というファイルの下から3行目にあるこの部分。

ss.STEPS = 25;

ここも同じく数値を小さくすれば速く、大きくすれば遅い動作になります。

jQuery Smooth Scroll
準備中

ダウンロードはこちら。
https://wordpress.org/plugins/jquery-smooth-scroll/

設定
特に設定はありませんが、キビキビした動作です。

以上です。
どちらのプラグインも動作が似ていますし難しい設定などもありませんので、比較的簡単に導入できると思います。

スマートフォンのアクセスが今後さらに増えてくる見込みですのでワードプレスのようなブログ、特にレスポンシブに対応させたテーマを使っている場合はスマートフォンからみるとページがかなり縦に長くなりますので、このようなプラグインは必須になってくるかと思います。


スクロールのテストです。

上に戻る

LINEで送る
Pocket

関連記事

コメントを書き込む

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