処理の流れ

この記事では、次のような目次(HTML)を想定してJavaScriptで処理を加え、カレント表示していきます。

HTML
コピー
<div class="sub_table_content_wrap">
    <div class="sub_table_content_title">目次</div>
    <div class="sub_table_content_inner">
        <a href="#section_content01"　class="sub_table_head_l">1.今回目指す形</a>
        <a href="#section_content02"　class="sub_table_head_l">2.どんな仕組みか？</a>
        <a href="#content_inner02-1"　class="sub_table_head_s">ー詳細を解説</a>
        <a href="#section_content03"　class="sub_table_head_l">3.まとめ</a>
    </div>
</div>

まず、前提として

• ・既に目次が設定されている
• ・ページ内遷移が設定されている

と理解しやすいかと思います。

処理の流れとしては、

• ①目次内のaタグを全て取得
• ②aタグのhref属性をセレクタとして指定し、記事内の要素を配列に入れる
• ③記事の最後の要素を配列に入れる
• ④記事の各要素内にいる時にclassにcurrentを追加する
• ⑤スクロールまたはロードした時に④を実行する

目次にカレント表示する方法

コピペしても動かないと思うので次のHTMLとJavaScriptを照らし合わせて理解して自分用にカスタマイズしてください😗

次のHTMLを想定してJavaScriptを書いています。

HTML
コピー
<div class="sub_table_content_wrap">
    <div class="sub_table_content_title">目次</div>
    <div class="sub_table_content_inner">
        <a href="#section_content01"　class="sub_table_head_l">1.今回目指す形</a>
        <a href="#section_content02"　class="sub_table_head_l">2.どんな仕組みか？</a>
        <a href="#content_inner02-1"　class="sub_table_head_s">ー詳細を解説</a>
        <a href="#section_content03"　class="sub_table_head_l">3.まとめ</a>
    </div>
</div>

カレントをつけるJavaScriptは次です。
classにcurrentを追加するだけなのでCSSで装飾してください。

JavaScript
コピー
// 目次内のaタグを全て取得
let sub_table_list = $('.sub_table_content_inner a');
 
let sub_table_current_contents = new Array();
for(let i = 0; i < sub_table_list.length; i++){
    // aタグのhref属性をセレクタとして指定して、記事内の要素を配列に入れる
    sub_table_current_contents[i] = $(sub_table_list.eq(i).attr('href'));
}
// 記事の最後の要素を配列に入れる
sub_table_current_contents[sub_table_list.length] = $('.end_text');
 
function sub_table_current() {
    sub_table_list.removeClass('current');
    let win_scroll_top = $(window).scrollTop()+110;
 
    for(let i = 0; i < sub_table_current_contents.length; i++){
        // 記事の各要素内にいる時にclassにcurrentを追加する
        if(sub_table_current_contents[i].offset().top <= win_scroll_top && sub_table_current_contents[i+1].offset().top > win_scroll_top){
            $(sub_table_list).eq(i).addClass('current');
        }
    }
}
 
// スクロールとロードした時に処理を実行
$(window).on('scroll load', function() {
    sub_table_current();
});

まとめ

初心者の方には少し難しい内容だったかもです。

これで少しは読みやすくなったと思います。