CSS3はなんて素晴らしいのだろう。
ということで今までjQueryや必殺技で対処してきた設定がCSS3ではいとも簡単に設定できる。
position:fixed;などでページヘッダー部分を固定した場合、ヘッダーの下に見出しやタイトルが隠れてしまう現象を避けるcssがあるのだ。
ちなみに今まではpaddingなどの手法で対処してきたが、css3なら以下scroll-padding-top: 開けたい高さ;の指定でOK!
scroll-padding-top: 80px;そしてオマケとしてスムーススクロール実装。
こちらもjQueryで対処してきた仕掛けだが、cssのscroll-behavior: smooth;で設定可能だ。
scroll-behavior: smooth;どちらもhtmlへの設定なので、二つ合わせてこんな感じ。
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}