【WP】Cocoonの目次をスムーススクロール化する方法（コピペでOK）

当サイトでも使用しているWordpressの無料テーマ「Cocoon」。

正直、こんな高性能なテーマが無料でいいの？と思ってしまうくらい優れたテーマなので、ブログ初心者の方にはぜひ使ってみて欲しいのですが、今回はこちらで「スムーススクロール」を実装する方法を紹介します。

スムーススクロールとは

スムーススクロールは、アンカーリンクをクリック時の遷移を滑らかに表現する手法です。

Cocoon内において、アンカーリンクが設置されている箇所は次の２つです。

• 右下のページTOPへ戻るボタン
• 目次

右下のTOPへ戻るボタンはあらかじめスムーススクロール化されているので、今回は目次をスムーススクロール化してみたいと思います。

Cocoonでページスクロールを実装する

準備

・Cocoonの子テーマを導入していること

これを用意していれば、あとの作業は数分で終わります。

テーマエディターを開く

今回はFTPからのファイル編集ではなく、WP上で編集する方法を紹介します。

まずは、管理画面の「外観」からテーマエディターを選択します。

javascript.jsを開く

テーマがCocoon Childであることを確認の上、javascript.jsを開きます。

下記コードをコピペする

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