目次
実装の流れ
１. 目次を入れるハコを用意（olタグ） ２. jQueryで、本文の中のh2タグを検出
３. 各h2タグに、index番号を含めたIDを付与
４. 目次のハコに、h2の数だけリンクを追加
STEP 1 目次を入れるハコを用意
<div>
<p>目次</p>
<ol class="js-table-list"></ol>
</div>
STEP2 jQuery を書いてみよう
$(function() {
var countId = 1
$('.detail__body h2').each(function() {
var ttl = $(this).text();
this.id = 'ttl-' + countId;
countId ++;
$('.js-table-list').append('<li><a href="#'+this.id+'"> '+ttl+'</a></li>');
})
});
＊ ポイント ＊
・countIdという変数で、何番目のタイトルなのかを管理しています。
・.detail__body クラス の中に存在するh2タグでeach文を回します。
（今回はh2のみを目次にピックアップする仕様にしています。）
・h2に、"何番目のタイトルなのか"を含めたidを付与します。
・付与したidをリンク先として、aタグを目次に追加していきます。
おわりに
本当はデモページとかあったらいいのですが。。
今後このラボに目次機能を追加してデモページとさせてください //
と、いうわけで。
以前よりいただいておりました、当記事にページ内リンク（アンカーリンク）をつけたいという声にお答えする準備が整いました。
この記事を読んで、実装してみたい！という方がいらっしゃらなければワタクシの方で実装させていただければと思います笑
