情報量が多く縦に長いWebページではページ内をスクロール移動させる
アンカーリンクを設置することはよくあります。
その際、Webページ内のヘッダー要素を固定していると、
アンカーリンクをクリックしてスクロール移動した位置と
固定ヘッダー要素が被ってしまう、という事象に陥ることがあります。

アンカーリンクで移動した位置に固定ヘッダーが被ってしまう動作サンプル

この固定ヘッダーを被らないようにするには
スクロールさせる位置の要素の上部に
固定ヘッダーの高さ分の余白を付けておくなど
画面構成において余白の対策が必要になったりするのですが
そのような煩わしい調整をせずに
CSSのbefore疑似要素を使って簡単に解消する方法があったのでご紹介してみます。

CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法

「CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法」サンプルを別枠で表示

冒頭で紹介している動作サンプルでは
アンカーリンクでスクロールした位置に固定ヘッダーが被ってしまっていました。

上記のサンプルではHTMLなどの基本構造は同じですが
アンカーリンクでスクロールしても固定ヘッダーが該当位置の要素に被らずに
停止位置を調整しています。

このアンカーリンクのスクロール位置の制御について
まずはHTMLから。

アンカーリンクのメニュー部分は
ページ内のIDに飛ばすように
リンク先を「#」をつけたID名にします。

これに対して、このサンプルでは
飛ばす先の要素は「section」で囲って構成しています。
※もちろん「section」以外のタグでも可。

スクロール動作のスクリプト動作については
この記事では割愛させていただきますが
リンク先が「#」のついたID名となっている要素をクリックしたら
該当箇所にスクロール移動させる構成になります。

このままで単純にCSSでレイアウト調整をするだけだと
スクロールした位置にヘッダー要素が被ってしまいます。

そこで、スクロール移動させる対象となる「section」に
before疑似要素をつけて停止位置を制御するようにします。

実際の「section」につけるbefore疑似要素の内容は
以下のように指定します。

before疑似要素でヘッダー要素の高さ（＋多少の余白）分の
空のブロック要素を追加して「margin-top」の位置を
ネガティブマージンでヘッダー要素の高さ分を上に移動させます。
※サンプルではヘッダー要素の高さが「100px」になっています。

アンカーリンクでスクロール移動した際は
このbefore疑似要素をつけた位置でスクロールが停止することになります。

このようにbefore疑似要素で位置を調整するだけで
アンカーリンクで移動させる要素に対して
固定ヘッダーがあっても停止位置と被ることなく
指定させることが可能になります。

※今回のサンプルは「CSS-Tricks」さんの記事を参考にさせていただいております。
【参考記事】Hash Tag Links That Don't Headbutt The Browser Window | CSS-Tricks

以上がCSSのbefore疑似要素を使って
ページ内スクロールでリンクした位置と固定したヘッダー要素が被らないようにする方法でした。

意外とこのアンカースクロールの位置調整は
画面の余白などレイアウトで調整しようとすると面倒だったりするので
このようにbefore疑似要素を使って制御ができると
とても便利になるかと思います。

ページ内スクロールでリンクした位置と固定したヘッダー要素が被らないようにする際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから