JSFiddle - React, Tailwind, and code Playground

by interlife

HTML

<div class="main-area inner">
  <ul class="anchor-area">
  </ul>
  <section>
    <h2 class="js-anchor-headline">ココナッツabout</h2>
    <p>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
  </section>
  <section>
    <h2 class="js-anchor-headline">info</h2>
    <p>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
  </section>
  <section>
    <h2 class="js-anchor-headline">＜hr＞<>の方がいいよ</h2>
    <p>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
  </section>
    <section>
    <h2 class="js-anchor-headline">犬飼たい</h2>
    <p>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
    <br>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
    </p>
  </section>
</div>

CSS

.inner{
  margin: 0 auto;
  padding: 20px;
  width: 500px;
  border: 1px solid;
  height: 280px;
  overflow: scroll;
}
.anchor-area{
  display: flex;
  justify-content: space-between;
}

JavaScript

/**
	 * 特定のエリアの見出しからアンカーリンクを作成
	 */
	$(".main-area .js-anchor-headline").each(function (index) {
		var title = $(this).text().replace(/</g, '&lt;').replace(/>/g, '&gt;'); //見出し内に<>があった場合の処理
		//hrを見出しの前に追加 & アンカーリンクを含んだ<li></li>を<li></li>内に追加
		$(".anchor-area").append('<li><a href="#anchor-' + index + '">' + title + '</a></li>');//結果のループ
		$(this).before('<hr class="anchor" id="anchor-'+index+'">');
	});