【CSS】ページ内リンクの移動時に スムーズにスクロールさせる方法

プログラミングを勉強中のみなさん、こんにちは！

今回は、ページ内リンクの移動時に、画面をスムーズにスクロールさせる方法を紹介します。

良く見かけますね。
あるところをクリックすると、スルスルって流れるように、ページの下の方のセクションにとんだりする、あれです。

初心者向けのメモ書きとして執筆しておりますので、あしからず。

それでは見ていきましょう。

コードの紹介

とっても簡単です。

下記のコードをCSSに記載しましょう。

html {
scroll-behavior: smooth;
}

これだけで、ページ内リンクの移動がスルスルっていきます。

注意点と補足

「できたのはいいけど・・・」と、何か気になった人はいませんか？

そうです。

移動先のタイトルが、ヘッダーとかぶって見えなくなっていませんか？

もちろんヘッダーのポジションをFIXにしている人に限った話ですが・・・
そんなときは、下記のようにしてください。

html {
scroll-behavior: smooth;
scroll-padding-top: 〇〇px;　←追加　※pxの数値はヘッダーの高さ（height）
}

こうすればヘッダーと移動先のタイトルはかぶりません。

まとめ

このように、ページ内リンクのスムーズな移動は、CSSだけで簡単に実装できます。

是非みなさんもやってみてください。

ヘッダーに関連する記事も紹介しておきます。