アンカーリンクでスムーススクロールさせたい場合、以前はJavaScriptを使う必要がありましたが、2022年8月現在は以下のCSSだけで実装することができます。
html {
scroll-behavior: smooth;
}
また、ヘッダー分スクロール位置をずらす場合も、
アンカーリンクの対象に以下を当てるだけで実装できます。
例）sectionにアンカーリンクで移動する際に80pxずらす場合
section {
scroll-margin-top: 80px;
}
●対象ブラウザ
scroll-behavior
scroll-margin-top
コメントする