【WordPress】WordPressテーマ「Cocoon」でページ内スクロールをスムーズにする方法

今回は、「Cocoon」でページ内スクロールをスムーズにするカスタマイズをご紹介します。

ページ内スクロールとは？

ページ内スクロールとは、目次のテキストリンクや、フッターにあるページトップボタンをクリックすると、該当の箇所まで飛んでくれます。

この機能は便利なのですが、デフォルトの設定だと、パッと該当の箇所まで飛んでしまい、どのくらいスクロールしたかわからず、ページのボリュームが把握できません。

なので、ぬるぬるっとスムーズにスクロールするようにカスタマイズしたいと思います。

スムーズスクロールのやり方

まずはWordPress管理画面のメニュー「外観」→「テーマエディター」をクリック。

次に、右側のテーマファイルから「footer-insert.php」を選択。

ファイルの中身が表示されたら、すでに記述されているコードはそのままで、1行目に下記コードを追加して、ファイルを更新をクリック。

<script>
//スムーズスクロール
jQuery(function(){
   jQuery('a[href^="#"]').click(function() {// # クリック時の処理
      var speed = 850; //スクロール速度を設定（単位：ミリ秒　※自由に変更可能）
      var href= jQuery(this).attr("href"); // アンカーの値を取得
      // 移動先を取得
      var target = jQuery(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;// 移動先を数値にて取得
      // スムーズスクロール
      jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>

↓このようになればOK。

スムーズスクロールの確認

更新したらサイトを確認してみましょう。
ぬるぬるっとスクロールすればOKです。

最後に

以上、「Cocoon」でページ内スクロールをスムーズにするカスタマイズのご紹介でした。
ぬるぬるっとスクロールされたでしょうか？

また、便利機能やおすすめのカスタマイズをご紹介します。