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

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

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

リンクがこれ

アンカーがこれ

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

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

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

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]

動作サンプルはこちら。

ダウンロードはこちら。
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/

設定

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

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

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

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

下記のリンクから上まで戻れます。

⇒上に戻る