制作・見積り依頼(無料)

Blogブログ

ブログのイメージ

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

Coding2023.01.16 : Yamamoto Naoki

従来ヘッダー固定した場合における、アンカータグによるページ内リンクは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を紹介していけたらと思います。

お仕事のご依頼やご相談は下記より
お気軽にお問い合わせください

Tel.089-961-4166(平日 9:00〜18:00/土日祝休業)