サイトでヘッダーを画面上部に固定表示している時に、アンカーポイントで表示位置を指定したり、ページ内リンクで移動したり…
というのは、当然ながらよく使われる手法ですが…。
ある時、リンクした先が微妙にズレて困った事はありませんか？
私はあります（笑）
原因ですが、主に固定ヘッダーを設定している場合に起こるようです。
通常、アンカーポイントにリンクする場合は、指定したポイントの頭がディスプレイの一番上に来るように遷移します。
ただし、固定ヘッダーがある場合は、ディスプレイ上はアンカーポイントを一番上に表示しても、そこに固定ヘッダーが被ってしまっているので、ズレて見えるというわけです。
原因自体は、結構単純ですね。
【対処法】
スクリプトを使用する方法と、CSSで調整する方法があるようですので、ご紹介します。
①スクリプトを使用する場合
※jQueryを使用します。
$(function () {
var headerHight = 100; //ヘッダの高さ
$('a[href^=#]').click(function(){
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
$("html, body").animate({scrollTop:position}, 550, "swing");
return false;
});
});
スクリプトで固定ヘッダーの高さを指定しておき、遷移後にその高さの分だけ位置をずらしてくれます。
動きがかわいくて好きなのですが、レスポンシブなどで固定ヘッダーの高さが可変になる場合、高さの違いからズレが生じます。
②CSSで調整する場合
【HTML】
<a id="test" class="sample"></a>
【CSS】
a.sample{
display: block;
margin-top:-100px;
padding-top:100px;
}
仕組みとしては、アンカーポイントの頭の位置をpadding-topで固定ヘッダーの分だけ上に上げつつ、margin-topのマイナス指定で相殺しています。
見た目は変わらないけど、実際のアンカーポイントの頭は、paddingの分だけ上にズレています。
※他にCSSが設定されているIDに対して上記のCSSを設定すると、うまく反映できないみたいなので、アンカーポイント用のタグは、上記のように別途設置してあげる方が無難です。
ちょっとややこしい気もしなくもないですが、これで固定ヘッダーを使っていても、アンカーポイントは安泰ですね！
（決して説明が下手とかじゃないよ。多分…）
【参照させていただいたサイト】