CSSだけでスムーズスクロールする

scroll-behavior というプロパティをアンカーがある親要素に指定する。

<a href="#target">smooth scroll link</a>

<div class="container">
...
  <div id="target">...</div>
...
</div>

.container {
  height: 100vh;
  overflow: scroll;
  scroll-behavior: smooth;
}

ヘッダーなどが固定の場合は、アンカー位置とヘッダーが重なったりするので、それを回避する場合は、scroll-margin-topプロパティを使用する。

/* ページ全体に適用 */
html {
  scroll-behavior: smooth;
  scroll-margin-top: 10em;
}