ページ上部にヘッダー（メニュー）を固定した時のページ内リンクのズレを直す方法

更新日：2019年8月28日

ページをスクロールした場合にページ上部にヘッダー（メニュー）を固定しているサイト、とても多いですね。
以前記載した記事にスクロールしてもページ上部にメニューを固定するjQueryというものがありますが、近頃人気がある手法ですという感じで紹介していたものが最早スタンダードになっていますね。WEB担当者の皆様がとてもよく勉強されているというのをひしひしと感じます。

しかしページ上部にヘッダーを固定したはいいものの、そうするとページ内リンクがズレちゃうんだけど……とお悩みの方結構いらっしゃるんじゃないかと思います。
今回の記事ではその対処方法のご紹介をしたいと思います。

では早速その方法ですが、なんとたった2行のCSSだけでページ内リンクのズレを直すことが出来ます。
例えば以下のように記述します。

.link_saki {
	margin-top: -50px;
	padding-top: 50px;
}

ここでは仮に.link_sakiというクラス名にしていますが、このCSSの記述はリンク先となるコンテンツ（divやp等）に記述してあげます。
そして仮にmargin-top: -50px;、padding-top: 50px;としていますが、この50pxというのはヘッダーの高さになります。あなたのサイトのヘッダーの高さが70pxなら50pxの箇所を70pxに変更して下さい。
この2点にさえ気を付けて頂ければOKです。これにて完成です。

こんな感じで簡単に実装することが出来ますので、お試し下さい。