ヘッダー固定でのアンカーリンクがずれる問題がCSS1行で完了する時代だった。scroll-padding-top恐るべし・・・
はじめに
ソニックムーブの安立です。
最近は細かい実装からだいぶ遠ざかっていて、久しぶりにやってみると色々な発見があります。
ヘッダーをfixedやstickyで固定した時に、ページ内リンクがずれるという問題は以前からありました。
Javasriptでスクロール量の調整したり、CSSでmarginやpaddingを駆使してどうにかするという形だったと記憶しています。
いずれにせよ、バッドノウハウ的な形でなかなかに面倒だったな〜・・・・と。
時代は変わり各種ブラウザのアップデートにより、この問題がjavascriptなしの、たった1行のCSSで解決できるようになっていたのでそれを紹介します。
ずばり結論
htmlタグに対して、scroll-padding-top
を設定しましょう。
※以下の例の場合は、headerの高さは80pxの想定です。
html {
scroll-padding-top: 80px;
}
はい。
scroll-padding-top
というCSSのプロパティです。
デモ
まずは何もしない状態のデモを見てみましょう。
うまくいかないデモ
ページ内リンクというリンクを押下すると、赤いエリアがヘッダーの下に食い込んで表示されます。
ページ内リンクは該当の箇所までスクロールするという挙動のため、固定されたヘッダーの高さ分は無視した状態となります。
そりゃそうだ。
scroll-padding-top
を設定して解決したデモが以下です。
うまくいくデモ
ページ内リンクというリンクを押下すると、赤いエリアがバッチリ表示されます。
scroll-padding-top
をヘッダーの高さ分指定しておくと、ブラウザがそれを解釈して、その分スクロール位置を調整してくれます。
素敵ですね。
ブラウザ対応状況
ブラウザも基本的なものは全て対応しているようです。
わーい、わーい。
まとめ
ヘッダーを固定した場合、ページ内リンクがズレますがscroll-padding-top
を設定すれば解決できます。
良い時代になりましたね。
Discussion