目次に戻るリンクを h2 見出しの区切りに自動挿入する方法

ブログ記事の本文中、h2 見出しタグの区切りに「目次に戻る」のテキストリンクを自動挿入する方法を紹介します。

当ブログでは設置後、記事によりますがそれなりにクリックされているようだったので、まぁまぁ意味はありそうです。

目次

目次に戻るリンクの自動挿入スクリプト

以下の JavaScript を、</body>直前に設置します。

<script>
//<![CDATA[
(function () {
  var backToc = '<div style="margin-top:2rem"><a href="#toc">↑ 目次に戻る</a></div>';
  var tocCheck = document.getElementById('toc');
  var postBody = document.querySelector('.entry-text');
  if (tocCheck) {
    var h2Elements = postBody.querySelectorAll('h2:not(:first-of-type)');
    for (var i = 0; i < h2Elements.length; i++) {
      var newDiv = document.createElement('div');
      newDiv.innerHTML = backToc;
      h2Elements[i].parentNode.insertBefore(newDiv, h2Elements[i])
    }
  }
})()
//]]>
</script>

このスクリプトでは、目次（toc という id の要素）がある場合、各 h2 タグの直前に「↑ 目次に戻る」リンクを設置します。最初の h2 タグの前には挿入されません。

※ 戻り先はid=toc の要素としています。目次に他の id が指定されている場合は、スクリプト内のtocの部分（２箇所）を修正してください。

※ 記事本文をクラス名.entry-textで指定しています。使用中のテンプレートで記事本文のクラス名を確認の上、適宜修正してご利用ください。

リンク確認用

この h2 見出しの上に目次に戻るリンクが挿入されています。