.css

.toc {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.toc-list {
  scroll-target-group: auto;
}

.toc-list .link:target-before {
  color: #999;
}

.toc-list .link:target-current {
  color: #0066cc;
  font-weight: bold;
}

.toc-list .link:target-after {
  color: #ccc;
}

.section {
  min-height: 100vh;
}

.html

<nav class="toc">
<ol class="toc-list">
  <li><a href="#section1" class="link">セクション1</a></li>
  <li><a href="#section2" class="link">セクション2</a></li>
  <li><a href="#section3" class="link">セクション3</a></li>
  <li><a href="#section4" class="link">セクション4</a></li>
</ol>
</nav>

<main>
<section id="section1" class="section">
  <h2>セクション1</h2>
</section>
<section id="section2" class="section">
  <h2>セクション2</h2>
</section>
<section id="section3" class="section">
  <h2>セクション3</h2>
</section>
<section id="section4" class="section">
  <h2>セクション4</h2>
</section>