スマートなヘッダー固定におけるアンカーリンク

従来ヘッダー固定した場合における、アンカータグによるページ内リンクはjavascriptを使用したり、cssのpaddingとmarginで相殺したり、丁度いい位置に空タグ入れたりしていたかと思います。

そうしないとヘッダーの高さ分ずれてしまって、肝心の見出しやコンテンツ、画像などがヘッダーに隠れていたことでしょう。

そんな中、最近はCSSが超絶便利になってきたので、CSSで且つスマートに対応することが可能となっています。

※最新ブラウザのみ

今回はそんなお話。

scroll-padding

例えば高さ80pxの固定ヘッダーがあるとすると

htmlに

scroll-padding-top: 80px;

と、記述すればあら不思議、スクロール時にだけ80pxの余白が当たります。そうするとヘッダーギリギリのところにコンテンツが表示されます。

いままで、ゴニョゴニョ書いていたのがたった1行で終わります。

スマートですね。

scroll-margin

また、子要素でを使用すると、先に設定したscroll-padding + scroll-margin が適用され、各コンテンツブロックごとの微調整も可能です。

scroll-margin-top:80px;

こちらを設定したコンテンツブロックのみ、scroll-padding-top:80px + scroll-margin-top:80px = 160px　余白がたり、ヘッダーから80pxのスペースがある状態でコンテンツが表示されます。

スマートです。

余談

scroll-behavior: smooth;　

を記述することで、その名の通りスムーズに移動してくれます。

これからも便利はCSSを紹介していけたらと思います。