ページ内リンクがずれてしまう問題を解決させる方法

ページ内リンクを使っていると目的の場所に移動すると思いますがずれてしまうという問題に直面した人も多い思います。

ページ内リンクが起こる原因としてはヘッダーなどの追従によって目的の場所に移動しているんだけどヘッダーの追従によって隠れてしまうということがあります。

なので解決策としてはヘッダーの追従分だけページ内リンクの位置をずらしてあげる必要があります。

ページ内リンクとは

ページ内リンクのしくみから見ていきましょう。

まずはリンクで移動させる場所のhtmlになります。

<div id="link">ここに移動させる</a>

次にページ内リンクをさせるhtmlになります。

下記のリンク先をクリックすることでid指定した「link」というところに飛ぶようになります。

<a href="#link">ページ内リンク</a>

ページ内リンクがズレるときはヘッダーの追従だったり様々な要因があります。

またズレていなくてもページ内リンクしたときにタイトルとブラウザの上に余白がなくピッタリしているために余白を入れたいというときもあると思います。

そんなときは下記の方法を試してみましょう。

a{
    display: block;
    padding-top: 50px;
    margin-top: -50px;
}

先ほどリンクで移動する場所にmarginやpaddingを使って位置の調整をしてあげましょう。

たとえば追従ヘッダーの高さが50pxであれば「padding-top: 50px;」と「margin-top: -50px;」を指定してあげましょう。

そうすればページ内リンクのときにピッタリになります。

また少しだけ余白をいれたいという場合は下記のようにmarginやpaddingの値を調整してあげると良いです。

これで問題解決です。