アンカーリンクを使って、ナビゲーションメニュー等でページ内スクロールさせること、あるかと思います。

その際にあるあるなのが、スクロールしたときに見出しが隠れること😅

今まではjsやjqueryでスクロール位置を調整していました。
1pしかないサイトの場合は問題ないのですが、複数ページあるサイトで他のページからページ内スクロールがあるページにhttp://○○#hoge等で遷移してきた際にはうまく調整できないという問題点がありました。

そんな時に簡単にできるのが、cssの:beforeを使って見えないところに空間を作る方法です。

ジャンプさせたい目的のブロック(IDを振っているブロック)にbeforeで見えない高さを設定します。
スマホ用に値を変更したいときは、media queryで変えればいいだけなので、簡単!IE11でも使えます。

めっちゃナイスな小技でした!

Miki Kohinata

就活時代、企業で働きたくないがゆえに将来独立することを決めエンジニアの道へ。IT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。