WordPressにスムーススクロールを実装してみよう!クリックで該当箇所までスクロール移動させる方法

WordPressにスムーススクロールを実装してみよう!クリックで該当箇所までスクロール移動させる方法

比較的多くのサイトで導入されているスムーススクロール
ちょこちょこ使う機会があるので、備忘録も兼ねて実装方法をまとめていきます。

スムーススクロールとは?

そもそもスムーススクロールってどういうもの?という方は

ここ

をクリックしてみてください。

ここまで自動でスクロールしたのが分かると思います。
これがスムーススクロールです。

同ページ内での移動(ページ内リンク)の際に目的地までの移動が可視化される為、ユーザーは自身がページ内のどこに移動したかわかりやすくなる、というメリットがあります。あと単純に動きがあってかっこいいですよね。WEBサイトっぽさがでます。

スムーススクロールを実装する

WordPressのテーマの多くには最初から組み込まれている機能ですが、テーマによってはスムーススクロールが働かないものもありますよね。

その場合、スムーススクロールを動かす為のJavascriptをページに記述してあげることで実装が可能です。header.phpfooter.phpなど、全ページに適用されるファイルに記述しておきましょう。

スムーススクロール実装のjavascriptはこちら

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

 

jQueryのプラグインが必須になります。WordPressだと大抵のテーマはプラグインの読み込みがデフォなので気にしなくても大丈夫ですが。

上記のjavasciptをページ内に記述すればスムーススクロールの実装は完了です。
実際にページ内リンクをクリックして確認してみましょう。

ページ内リンクの指定方法

ページ内リンクとリンク先の設定方法はaタグid属性で指定します。

クリックされたときにユーザーを移動させたい要素を「a href=”#●●●”」で囲み、スクロール先に「id=”●●●”」を指定します。

aタグはhref属性の中でURLを指定せず「#●●●」と記述してあげることでページ内リンクになります。htmlでタグを記述し、ページがぬるっと動けば成功です!

もっと早く(遅く)スクロールさせたい場合

基本的に参考のソースのままで問題はないかと思いますが、speedの値を変更する事でスクロールのスピードを変えることもできます。1000=1秒となりますので、上記の場合だと0.5秒かけて目的のコンテンツまでスクロールするという形ですね。

余りに遅いと問題ですし早すぎるのもどうかと思うので0.5秒ぐらいがちょうど良い時間だとは思います。変更したい場合は100(0.1秒)ずつ増減させて様子を見ながら調整してみてください。

動きません!の対処法

やってみたけど動かなかった、という場合はjQueryで使われている「$」が悪さをしている可能性があります。「$」が、というよりは「$」使ってコンフリクトしないようにWordPressでは制限がかかっているせいですが…

詳しくは下記の記事をご覧ください。

対処法としては「$」をすべて「jQuery」に置き換えることです。

jQueryに置き換えたソースがこちら

jQuery(function(){
  jQuery('a[href^="#"]').click(function(){
    var speed = 500;
    var href= jQuery(this).attr("href");
    var target = jQuery(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    jQuery("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

こちらであれば問題なく動くようになるかと思います。

まとめ

簡単に導入できるうえ、ユーザーにとっても視覚的なメリットの多い機能ですので、私のブログはスムーススクロールしてない!という方はぜひ導入してみてください。クリック時にスムーススクロールするだけで、何となく「いい感じのWEBサイト」っぽさがでますよ。

WEB制作カテゴリの最新記事