ページ内リンクでゆっくりスクロールさせたい

スクロールが実行されたときの処理を設定できるCSSプロパティはscroll-behaviorといいます。以下の2種類があります。

• auto：リンク先まで瞬時に移動する。
• smooth：リンク先まで滑らかにスクロールする

autoが初期値です。

9行目のように「scroll-behavior: smooth;」とすることでスクロールがスムーズになります。

なお、22行目のようにref="#top"と指定することでページのトップへ戻ることができます。

最後までお読みいただきありがとうございます。