プログラミングを勉強中のみなさん、こんにちは!
今回は、ページ内リンクの移動時に、画面をスムーズにスクロールさせる方法を紹介します。
良く見かけますね。
あるところをクリックすると、スルスルって流れるように、ページの下の方のセクションにとんだりする、あれです。
初心者向けのメモ書きとして執筆しておりますので、あしからず。
それでは見ていきましょう。
コードの紹介
とっても簡単です。
下記のコードをCSSに記載しましょう。
html {
scroll-behavior: smooth;
}
これだけで、ページ内リンクの移動がスルスルっていきます。
注意点と補足
「できたのはいいけど・・・」と、何か気になった人はいませんか?
そうです。
移動先のタイトルが、ヘッダーとかぶって見えなくなっていませんか?
もちろんヘッダーのポジションをFIXにしている人に限った話ですが・・・
そんなときは、下記のようにしてください。
html {
scroll-behavior: smooth;
scroll-padding-top: 〇〇px; ←追加 ※pxの数値はヘッダーの高さ(height)
}
こうすればヘッダーと移動先のタイトルはかぶりません。
まとめ
このように、ページ内リンクのスムーズな移動は、CSSだけで簡単に実装できます。
是非みなさんもやってみてください。
ヘッダーに関連する記事も紹介しておきます。 続きを見る
【CSS】ヘッダーの固定は position:fixed; 上部にすきまができたらtop:0