【Cocoonカスタマイズ】トップへ戻るボタンの戻り先を目次に変更する方法

はじめに
完成イメージ
実装手順
参考：PHPで実装する場合
- 実装手順
参考：目次へ戻るボタン使用時の画像切替の問題点
- 実装方法
さいごに

はじめに

投稿や固定ページに目次がある場合、トップへ戻るボタンのリンク先を目次に変更します。
このとき、トップへ戻るボタンのアイコンや画像を目次用に変更します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下の手順で実装します。

ラベル
Cocoon設定

表1に示す項目を設定します。

Cocoon設定
設定大項目項目設定値
目次目次設定目次を表示するオン
ボタントップへ戻るボタン設定トップへ戻るボタンを表示するオン

設定	大項目	項目	設定値
目次	目次設定	目次を表示する	オン
ボタン	トップへ戻るボタン設定	トップへ戻るボタンを表示する	オン

ラベル

JavaScriptを追加

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  const $toc = $('.entry-content .toc');

  if (!$toc.length) {
    return;
  }

  const $button = $('.go-to-top-common');

  $button.off('click').addClass('go-to-toc-common');

  $('.go-to-toc-common').on('click', function () {
    $('body, html').animate({
      scrollTop: $toc.offset().top
    }, 800);
  });
});

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。
画像サイズに合わせて適宜変更してください。

/* 目次へ戻るボタン */
.go-to-toc-common {
  span::before {
    content: "\f03a";
  }

  &.go-to-top-button-image {
    height: 40px;
    width: 40px;

    img {
      display: none;
    }

    &::before {
      background-image: url("目次へ戻る画像URL");
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      display: block;
      height: 100%;
      width: 100%;
    }
  }
}

参考：PHPで実装する場合

PHPを用いて同様の処理を行う方法もあります。
目次がある場合に「トップへ戻るボタン」のクラスを変更します。

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('cocoon_part__tmp/button-go-to-top', function ($content) {
  if (is_the_page_toc_use()) {
    $content = str_replace('go-to-top-common', 'go-to-toc-common', $content);
  }

  return $content;
});

参考：目次へ戻るボタン使用時の画像切替の問題点

画像を切り替えるカスタマイズを行った場合、目次へ戻るボタンを使用すると、スクロール中の画像が意図通りに切り替わらないことがあります。

これは、スクロール位置がページトップではなく目次で止まるため、CSSクラスが削除されないことが原因です。
そのため、スクロール終了時にCSSクラスgo-to-top-upを削除する必要があります。

トップへ戻るボタンをクリックすると画像を変える方法

「Cocoonのトップへ戻るボタンをクリックして画像をアニメーションさせる方法」を解説。クリック前後で画像を切り替え、トップへ移動する間に揺れるアニメーションを表示する方法や、CSSのstepsを使ったパラパラアニメーション、APNGの作成方法を分かりやすく紹介します。

実装方法

以下のコードをjavascript.jsに追加します。

jQuery(function ($) {
  const $toc = $('.entry-content .toc');

  if (!$toc.length) {
    return;
  }

  $('.go-to-top-common').addClass('go-to-toc-common');

  $('.go-to-toc-common').on('click', function () {
    $('body, html').stop().animate({
      scrollTop: $toc.offset().top
    }, 800, function () {
      // スクロールが完了したらクラスを削除
      $('.go-to-top-common').removeClass('go-to-top-up');
    });
  });
});

さいごに

今回紹介した方法を使えば、投稿や固定ページにおける「トップへ戻る」ボタンを目次にリンクさせ、目次までスムーズにスクロールできるようになります。
JavaScriptやCSSを活用して、ボタンの見た目や挙動を目次に特化させることで、ユーザーの利便性を向上させることができます。