ヘッダを固定している時のページ内リンクのズレ補正

ウェブ制作技術

おはようございます、ヒグチです。
昨日の晩、なにを食べたか思い出せません。
そのかわり、母の胎内にいるときのぬくもりは思い出すことができます。
それを心の糧にして生きています。

本日は、かゆいところに手が届きそうな気がする、コーディングのTIPS紹介のコーナーです。

コーディングTIPS

ヘッダを position:fixed で固定している時、アンカーリンクのズレを補正する

ヘッダをposition : fixed;で固定して、スクロールしてもロゴやナビゲーションがずっと上に見えてるUI、ありますよね。
ページを見ている人は、いつでもロゴやグローバルナビに触れて、便利だと思います。

プログラミング

でも、これをしてると、ページ内リンク(アンカーリンク)でコンテンツ内にジャンプした時、ずれて表示されてしまいます。
アンカーリンクはウィンドウの一番上にぴたっと止まるので、固定されてるヘッダの後ろに隠れてしまうんですね。

プログラミング

これを解消する方法を紹介します。
CSSでやる場合と、Javascriptでやる場合の2種類あります。

CSSで解消

リンク先となるコンテンツブロックに対して、ヘッダの高さ分だけ、padding-topにいれ、margin-topに同じ値をマイナスで入れる方法です。

リンク先のコンテンツブロックを「section」、ヘッダの高さを50pxとすると、下記のようなコードになります。

Javascriptで解消

ページ内のスクロールをJavascript(jQuery)で実装している方も多いと思います。

そのコードに少し書き加えるだけで、固定ヘッダのズレ問題を解消できます。
具体的には、移動するターゲットの座標から、ヘッダの高さ分だけ引いてあげます。

下記は、固定ヘッダのズレを考慮した、するするスクロールのコード例です。


いかがでしたでしょうか。
ちょっとでもどなたかの救いになれば幸いです。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。