今回は、ページ内リンクの移動をスムーズにスクロールさせる方法を紹介します。
良く見かけますね。
タイトルをクリックすると、スルスルって流れるように、ページの下の方のセクションにとんだりする、あれです。
CSSコードにちょこっと手を加えるだけですので「秒」でできちゃいます。
それでは見ていきましょう。
コードの紹介
とっても簡単です。
下記のコードをCSSに記載しましょう。
html {
scroll-behavior: smooth;
}
これだけで、ページ内リンクの移動がスルスルっていきます。
注意点
HTMLでaタグの設定
セクションタイトルに飛ぶように設定することが多いと思うんですけど、
aタグのhrefにIDを入れるのを忘れずに。
<a href="#ID名">メニュー名</a>
もちろんリンク先のセクションやタイトルにも同じID名を忘れずにね。
これを忘れると紐付けされないので、いくらクリックしても移動しません。
ヘッダーと被ったら
「スクロール移動できたのはいいけど・・・」と、何か気になった人はいませんか？
そうです。
移動先のタイトルが、ヘッダーとかぶって見えなくなっていませんか？
もちろんヘッダーのポジションをFIXにしている人に限った話ですが・・・
そんなときは、下記のようにしてください。
html {
scroll-behavior: smooth;
scroll-padding-top: 〇〇px; ←追加 ※pxの数値はヘッダーの高さ（height）
}
こうすればヘッダーと移動先のタイトルはかぶりません。
まとめ
いかがでしたでしょうか。
このように、ページ内リンクのスムーズな移動は、CSSだけで簡単に実装できます。
ぜひみなさんもやってみてください。
ヘッダーに関連する記事も紹介しておきます。 続きを見る
ヘッダーの固定は position:fixed; 隙間対策はtop:0
独学で行き詰まったらテックアカデミー無料メンター相談もおすすめです。
