WEB制作

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

スポンサーリンク

waterfall

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

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

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

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

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

コードの紹介

とっても簡単です。

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

html {
scroll-behavior: smooth;
}

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

注意点と補足

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

そうです。

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

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

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

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



まとめ

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

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

 

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

スポンサーリンク

-WEB制作
-, , , , , , , , , ,

© 2023 WEBセンス Powered by AFFINGER5