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

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

1. スムーススクロールとは？
2. スムーススクロールを実装する
- 2.1. ページ内リンクの指定方法
- 2.2. もっと早く（遅く）スクロールさせたい場合
3. 動きません！の対処法
4. まとめ

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

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

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

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

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

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

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

その場合、スムーススクロールを動かす為のJavascriptをページに記述してあげることで実装が可能です。header.phpやfooter.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では制限がかかっているせいですが…

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

- WP topics -

WordPressでjQueryが動かない？原因はたった一つの単純な事だった。

https://wp-topics.com/base/384/

WordPressでjQueryが動かない？jQueryって便利ですよね。WEBサイト制作において今やなくてはならない存在ではないかと思います。そんなjQueryですが、ことWordPressで動かそうとするとうまく機能しません...WordPressにはデフォルトでjQueryが入っているから動かないはずはないんです。記述は正しいはずなのになぜ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;
  });
});

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