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

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

良く見かけますね。

タイトルをクリックすると、スルスルって流れるように、ページの下の方のセクションにとんだりする、あれです。

CSSコードにちょこっと手を加えるだけですので「秒」でできちゃいます。

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

コードの紹介

とっても簡単です。

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

html {
scroll-behavior: smooth;
}

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

セクションタイトルに飛ぶように設定することが多いと思うんですけど、

aタグのhrefにIDを入れるのを忘れずに。

<a href="#ID名">メニュー名</a>

もちろんリンク先のセクションやタイトルにも同じID名を忘れずにね。

これを忘れると紐付けされないので、いくらクリックしても移動しません。

「スクロール移動できたのはいいけど・・・」と、何か気になった人はいませんか？

そうです。

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

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

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

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

いかがでしたでしょうか。

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

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

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