こんにちは！
上毛印刷WEB制作担当のソーヤです。

皆様、ブログを作成する際、
その記事の目次（Table of Contents）は作成していますでしょうか。

正直いちいち見出しに合わせたリンクやインデントとかも面倒ですよね・・・

でも、今回ご紹介する「Tocbot」を使えば、
自動的に目次（Table of Contents）を作成してくれるし、
今、どこの見出しにいるのかも一目瞭然です。

実装例が少し特殊なので、デモページを作成しました。
アクセスしてみてください。
デモページはこちら（別タブで開きます）

HTML例

まず下記CDNを＜script＞の直前に記述してください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.32.2/tocbot.min.js"></script>

そうしたらは下記、本体を記述してください。

<div class="toc js-toc"></div>
<div class="content js-toc-content">
  <section>
    <h1 id="sec1">見出し1</h1>
    <p>ここに本文が入ります。</p>
    <h2 id="sec1-1">見出し1-1</h2>
    <p>たくさんのテキスト...</p>
    <h3 id="sec1-1-1">見出し1-1-1</h3>
    <p>たくさんのテキスト...</p>
  </section>
  <section>
    <h1 id="sec2">見出し2</h1>
    <p>ここに本文が入ります。</p>
    <h2 id="sec2-1">見出し2-1</h2>
    <p>たくさんのテキスト...</p>
  </section>
  <section>
    <h1 id="sec3">見出し3</h1>
    <p>ここに本文が入ります。</p>
    <h2 id="sec3-1">見出し3-1</h2>
    <p>たくさんのテキスト...</p>
  </section>
</div>

CSS例

.toc {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 150px;
  padding: 10px;
  border: 1px solid #ddd;
  background: #fff;
  max-height: 90vh;
  overflow-y: auto;
}
.toc .is-active-link {
  font-size: 1.2em;
  font-weight: bold;
  color: #e60033;
  transition: all 0.2s ease;
}
.content {
  margin-left: 250px;
  max-width: 700px;
}
section {
  margin-bottom: 100vh;
}
.toc ol{
  padding: 0 0 0 10px;
}
.toc li{
  list-style: none;
}

JavaScript例

tocbot.init({
  tocSelector: '.js-toc',
  contentSelector: '.js-toc-content',
  headingSelector: 'h1, h2, h3',
  scrollSmooth: true
});

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

コピペしてガンガン使ってください！