ヘッダー部分を「position:fixed;」で固定してスクロールに追尾させていると、アンカーリンク(ページ内リンク)への移動時に、固定したヘッダー部分の高さ分、移動先の位置がずれてしまいます。
正確には、位置がずれるというか、固定ヘッダーが移動先の要素の上に被ってしまい、位置がずれているように感じます。いずれにしても厄介な問題です。
このずれを解消する方法を、jQueryを使った方法とCSSを使った方法の、2パターンご紹介いたします。
固定ヘッダーを実装している際にアンカーリンクの位置がずれるのを解消する方法
jQueryを使ったずれの解消法
jQueryを使ってずれを解消する場合、移動先の位置を取得した際に、ヘッダーの高さ分位置をずらしてあげます。
何も対策していないアンカーリンク用のコードがこちら↓
<script>
$(function(){
$(".internallink").click(function(){
$("html,body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 800 ,"swing");
return false;
})
});
</script>
internallinkクラスが付いているアンカーリンクをクリックしたら、滑らかに移動します。ただ、このままだと、固定ヘッダーの高さ分位置がずれてしまうので、以下のように固定ヘッダーの高さを移動先までの座標から差し引いてあげます。
<script>
$(function(){
if($(window).width() < 468) {
var headerHight = 100;
} else {
var headerHight = 150;
}
$(".internallink").click(function(){
$("html,body").animate({ scrollTop: $($(this).attr("href")).offset().top-headerHight }, 800 ,"swing");
return false;
})
});
</script>
headerHightの値を固定ヘッダーの高さにします。上記の場合、横幅が468px未満のブラウザでは100px、それ以外では150pxを移動先までの座標から差し引きます。
これで固定ヘッダーが要素に被って、位置がずれてしまうのを防ぐことができます。
CSSを使ったずれの解消法
上記はjQueryを使った解消法ですが、CSSのbefore疑似要素を使ってずれを解消する方法もあります。
例えば、各section要素が移動先だとすると、CSSでは以下のように指定します。
section:before {
content: "";
height: 100px;
margin-top: -100px;
display: block;
visibility: hidden;
}
もちろんsection要素ではなく、IDやクラスなどで指定してもOKです。重要なのは「height」と「margin-top」で、heightで固定ヘッダーの高さ分要素の上に余白を作り、margin-topでマイナスの値を指定し相殺しています。上記の場合は100pxですが、環境に合わせて値は変更してください。
これにより見た目上は変わらなくても、要素の上に固定ヘッダーの高さ分の余白ができ、アンカーリンクの移動先は余白部分になります。そのため、固定ヘッダーの高さ分のずれが解消できるというわけです。
あとがき
最近は、案件でも固定ヘッダーを実装する機会が増えてきました。たしかにナビゲーションが常に表示されていると便利ですよね。便利な反面、アンカーリンクの移動位置がずれてしまうという問題もあるので、しっかりと対策しておきたいですね。