CSSのscroll-behavior: smoothのスムーススクロール。

一緒に使うと便利なのが「scroll-margin-top」プロパティ。

スクロール位置を調整できるため、固定ヘッダー+スムーススクロール時にスクロール位置がヘッダーで隠れるのを防げる。

全モダンブラウザ対応。

デモ
https://codepen.io/tonkotsuboy/pen/NWyNMOo?editors=1100