ページ内の任意の箇所にジャンプさせようとして試してみたら、思っていた場所より数行上に表示されてしまうことがある。

結論から言うと、ジャンプ先がずれてしまう原因は固定ヘッダーにある。

表示がずれているわけではなく、ジャンプ先がヘッダーの背後に表示され隠れてしまっているのだ。

ページ内リンクのジャンプ先がずれないようにする解決策

解決策として、リンク先のページ内でジャンプする際に、ヘッダーの高さ分だけページ下方向へ移動して表示させる方法をご紹介したい。

この方法では、アンカータグ<a>〜</a>を使用する。リンク先とリンク元をアンカーで指定し、CSSでアンカーの表示位置をヘッダー高さ分だけ下に移動させて表示させる。

リンク先
<a id="name" class="anchor" ></a>

nameは好きな名前でジャンプ先の名前を設定する。

リンク元
<a href="#name">リンク元</a>

CSS
a.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

CSSのa.anchor クラスのtop: -100px;の部分でヘッダーの高さを指定する。

ヘッダーの高さを調べるには、Chromeなどのブラウザで検証ボタンを押して調べる方法が簡単だ。ヘッダー部分をマウスで選択してヘッダーの高さピクセルを参照する。

以上で、固定ヘッダーのあるウェブサイトでもジャンプ先をヘッダーの下にぴったりと表示することができる。

最後に

Google検索したところ、他のウェブサイトではmargin-topとpadding-topで打ち消して表示する方法や、 JavaScriptで調整する方法などがあったが、ブラウザによってはまだずれて表示されてしまったり、JavaScriptは敷居が高くて採用しなかった。

今回の方法であれば、各種ブラウザでも実証ずみであり、アンカーを使った方法で統一感があるためオススメしたい。