html

<ul class="header--fixed">
  <li><a href="#target1">ターゲット1</a></li>
  <li><a href="#target2">ターゲット2</a></li>
  <li><a href="#target3">ターゲット3</a></li>
</ul>
<section id="target1" class="section" style="margin-top:1000px;">
  ターゲット1
</section>
<section id="target2" class="section" style="margin-top:1000px;">
  ターゲット2
</section>
<section id="target3" class="section" style="margin-top:1000px;">
  ターゲット3
</section>

scss

//追従ヘッダーの高さを設定
$fixedHeight: 60px;
html {
  // ページ内リンクをスムーススクロールに設定
  scroll-behavior: smooth;
  // ページ内リンク実行の際にhtml全体にpaddingを設定する(paddingかmarginかどちらか一方を採用)
  scroll-padding-top: $fixedHeight;
}
.section {
  // ページ内リンク実行の際にmarginを確保する場合(paddingかmarginかどちらか一方を採用)
  scroll-margin-top: $fixedHeight;
}
.header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $fixedHeight;
  background: #333;
  display: flex;
  li {
    a {
      color: #fff;
    }
  }
}