Home
JavaScript
記事の目次にカレント表示機能を導入する😤

記事の目次にカレント表示機能を導入する😤

公開日
2022.03.26
更新日
2022.04.02
記事の目次にカレント表示機能を導入する😤

どうも!かけちまるです!

サイドバーに設置してある目次にカレント表示をしてより快適に記事を読んでもらえるようにしよう的なことです。

このブログのようなカレント表示ができるようになります。(PCのみ表示されてます)

この記事では、

  • ・カレント表示の処理の流れ
  • ・目次にカレント表示する方法

がわかります。

処理の流れ

この記事では、次のような目次(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属性をセレクタとして指定し、記事内の要素を配列に入れる
  • ③記事の最後の要素を配列に入れる
  • ④記事の各要素内にいる時にclasscurrentを追加する
  • ⑤スクロールまたはロードした時に④を実行する

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

コピペしても動かないと思うので次の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は次です。
classcurrentを追加するだけなので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(); });

まとめ

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

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

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【Three.js】スクロールにあわせてメッシュを動かす方法

【Three.js】スクロールにあわせてメッシュを動かす方法

GLSLの修飾子varyingの使い方【Three.js】

GLSLの修飾子varyingの使い方【Three.js】

特定のブラウザのみにCSSを適応させるハック

特定のブラウザのみにCSSを適応させるハック

videoタグの再生や停止などをJSでコントロールする方法

videoタグの再生や停止などをJSでコントロールする方法

【コーディング効率化】VSCodeにコードスニペットを登録しよう

【コーディング効率化】VSCodeにコードスニペットを登録しよう

【基本】Local by FlywheelでWordPressをローカルに構築する

【基本】Local by FlywheelでWordPressをローカルに構築する