JavaScript

スクロールに応じて現在地表示（カレント表示）する固定目次をJavaScriptで作る（jQueryなし）

最終更新日：

ホームページの脇に固定で目次を表示し、現在見ているところをハイライトで示すものについて、jQueryなしでJavaScriptで作る方法をご紹介します。

目次

  1. 実装結果デモ
  2. 説明
    1. HTML
    2. CSS
    3. JavaScript
  3. まとめ
SEOに強いAIライティングツール「BringRitera」 SEOに強いAIライティングツール「BringRitera」

実装結果デモ

まずは実装した結果をご確認ください。
スクロールしていくと、その時に表示されている見出しがハイライトされます。
固定表示されている目次で見出しをクリックすれば、そこにスクロールします。

説明

HTML

  1. <section class="toc-demo">
  2.   <h2>見出し１</h2>  
  3.     <p>
  4.         省略します。    
  5.    </p>
  6.   <h2>見出し２</h2>  
  7.     <p>
  8.         省略します。    
  9.     </p>
  10.   <h2>見出し３</h2>
  11.     <p>
  12.         省略します。    
  13.     </p>
  14.   <h2>見出し４</h2>  
  15.     <p>
  16.         省略します。    
  17.     </p>
  18.   <h2>見出し５</h2>  
  19.     <p>
  20.         省略します。    
  21.     </p>  
  22. </section>

後でお示しするJavaScriptでは、h2要素を拾って目次にします。
目次を挿入する箇所として、ここではclass="toc-demo"とつけられたsection要素の開始タグ直後とします。section要素は、他の要素でも大丈夫です。

CSS

  1. section.toc-demo{
  2.   width: 800px;
  3.   margin: 0 auto;
  4. }
  6. h2{
  7.   font-size: 20px;
  8.   background-color: #f3f3f3;
  9.   border-bottom: 3px solid #333;
  10.   padding: 5px 0 5px 10px;
  11. }
  12. p{
  13.   padding-left: 10px;
  14. }
  15. ol{
  16.   width: 150px;
  17.   position: fixed;
  18.   top: 0;
  19.   right: 0;
  20. }
  21. li{
  22.   list-style-type:none;
  23. }
  24. a{
  25.   display: block;
  26.   width: 100%;
  27.   background-color: rgba(70 70 70 / 70%);
  28.   color: #fff;
  29.   margin-bottom: 1px;
  30.   text-decoration: none;
  31.   padding: 3px 5px 3px 10px;
  32. }
  33. a.current{
  34.   background-color: #fff;
  35.   color: #000;
  36. }

機能的な意味がある点としては、

17～19行目：この記述で右上に固定しています。
33～37行目：後述するJavaScriptで、現在表示されている見出しにclass="current"のクラス名をつけるので、その部分の見た目をここで変えています。

JavaScript

  1. const headings = document.querySelectorAll('h2');
  2. let toc = '<ol id="fixed-toc">';
  4. headings.forEach( function(heading, index) {
  5.   heading.id = 'heading-0' + (index+1);
  6.   let id = heading.id;
  7.   toc = toc + '<li><a href="#' + id + '">' + heading.textContent + '</a></li>';
  8. });
  10. toc = toc + '</ol>';
  11. document.querySelector('.toc-demo').insertAdjacentHTML('afterbegin', toc);
  13. window.addEventListener('scroll', function() {
  14.     let scroll = window.scrollY;//スクロール量を取得
  15.     let hight = window.innerHeight;//画面の高さを取得
  16.     let offset = 200;
  17.     const toc_completed = document.getElementById('fixed-toc');
  19.     headings.forEach( function( heading , index) {
  20.         let i = index + 1;
  21.         let target = document.querySelector('#fixed-toc li:nth-of-type(' + i + ') > a');
  22.         let pos = heading.getBoundingClientRect().top + scroll;//見出しの位置
  24.         if ( scroll &gt;pos - hight + offset ) {//スクロール量が見出しを超えた
  26.             if (headings[index + 1] !== undefined){// 次の見出しがある＝最後の見出しではない
  28.                 let next_pos = headings[index + 1].getBoundingClientRect().top + scroll;//次の見出しの位置
  29.                 if ( scroll &gt; next_pos - hight + offset ) { // スクロール量が次の見出しも超えている
  30.                     target.classList.remove('current');
  31.                 } else if (target.classList.contains('current') == true) { // すでにcurrentがついている
  32.                     return;
  33.                 } else if ( i == 1 &amp;&amp; toc_completed.classList.contains('active') == false ){// 1つ目
  34.                     target.classList.add('current')
  35.                     toc_completed.classList.add('active')
  36.                 } else { // 次の見出しは見えてない
  37.                     target.classList.add('current');
  38.                 }
  40.             } else { //最後の見出しの時
  41.                 target.classList.add('current');
  42.             }
  43.         } else { //スクロール量が見出しを超えてない
  44.             target.classList.remove('current');
  45.             if ( i == 1 &amp;&amp; toc_completed.classList.contains('active')){ //１つ目に到達していない場合
  46.                 toc_completed.classList.remove('active')
  47.             }
  48.         }
  49.     });
  50. });
1行目：ページ内に存在するh2をすべい拾い配列headingsに格納します。
2行目：挿入する目次のHTMLを変数tocに記述します。ここではまず、ol要素の開始タグのみ格納しています。
33～37行目：配列headingsに格納されている見出しそれぞれに、heading-01, heading-02というようにid名を付しています。
7行目：2行目で宣言した変数に、目次の中身となるliをここで格納しています。
10～11行目：
  • どの時点で、現在表示されている見出しとするかは16行目の変数offsetの値で調整します。
  • 現在表示されていると判断された見出しにclass="current"をつけています。
  • 上にスクロールしていくときの判断も必要なため、少し複雑なコーディングになっています。コメントアウトでコード中に補足をしているので、どのようにしているか具体的にはそのあたりから読み取ってください。

まとめ

固定表示して、現在表示されている見出しをハイライトする目次の作り方をご紹介しました。
１ページ１テーマであるブログなどではこのような目次にする必要はないと私は思いますが、長めのページで、人によっては後の方の内容だけに興味をもって見る可能性があるようなページの場合に、このような目次にしてみてもよいかなと思っています。

もし参考になった、という方いればSHAREしてもらえると、励みになります！