ページ内リンクの移動先が固定メニューの高さ分、上にズレる

サイトによってはページ上部に固定メニューを使っているケースもあります。こういう環境では、ページ内リンクをクリックして飛んだ先の要素が全体に上へズレることがあります。これは固定メニューの設定で利用されるcssの「position: fixed」が原因と考えられます。

ページ内リンク（ジャンプ）移動先でのズレ対策

ズレへの解決策は、cssで固定メニュー分の高さをpadding-topに代入し、同時にmargin-topで同じ高さを差し引くのが最も簡単です。ロジック的には移動先の要素の高さをpadding-topで広げ、その際に発生する要素上部の空白をmargin-topで差し引くというものです。

paddingトップのみでも上手く移動できますが、それぞれの移動先の要素の上部に空白が発生するため、cssを作成した当初に想定した枠組みとは少々異なるものになってしまいます。そのため、marginトップで差し引いて空白を埋めます。

ページ内リンクのズレに対しては、他にjavascriptで変更させるやり方もありますが、記述する上ではcssのほうが断然容易です。当サイトでは以下のように記入しています。

ページ内リンクのズレとは直接関係ありませんが、二行目の＊印はアスタリスクと呼ばれる正規表現の一つで、「item」を含むidという意味です。当サイトでは移動先要素のidに「item1」「item2」というふうに連番で指定しており、これら全てに適用させるためにアスタリスクを使用しています。もちろん「#item1,#item2」といったカンマで区切る書式でも動作します。

三行目、四行目の「!important」は、無くても動作するなら必要ありません。スタイルシートには優先順位というものがあり、同一ファイル内では後から指定したものが優先されます。「!important」はその順位を無視して「プロパティ: 値　!important;」という設定ごとに優先させることができます。その他、通常のスタイルより優先されるクラスセレクタやIDセレクタといったものがありますが、ここでは割愛します。

以上、ページ内リンクのズレへの対策でした。