![見出し画像](https://assets.st-note.com/production/uploads/images/10687955/rectangle_large_type_2_3a02ada5742946bdb1c199dda0e7e97e.jpeg?width=1200)
ヘッダ固定時のアンカーリンクずれ解消法
position:fixedでヘッダーを固定しているデザインでページ内リンクを設定すると、リンク先へジャンプした時にヘッダの高さ分、位置がズレてしまうのをどうにか出来ないものか…と格闘したので、その対処法のメモです。
単純にheaderの高さ分paddingとmarginで相殺する
例えば、以下のようなソースに実装すると
<div class="header">
ヘッダー
</div>
<div class="content">
<a href="#link01">コンテンツ</a>
</div>
<div class="content" name="link01" id="link01">リンク先</div>
ヘッダの高さが80pxとした場合
.header {
width: 100%;
min-width: 960px;
height: 80px;
position: fixed;
left:0;
top:0;
}
.content{
padding-top: 80px;
} #link01 {
margin-top:-80px;
padding-top:80px;
}
これで上手い具合に相殺できると、意図した位置で止まってくれるはずなのですが、今回はアンカーリンクのidにスタイルを設定していたので、思ったようにcssが効いてくれませんでした。。
そこで色々調べてみたら、javascriptで強制的に移動させる方法があったので追記しておきます。
jQueryでヘッダの高さ分ページTOPの位置をずらす
$(function () {
var headerHight = 80; //ヘッダの高さ
$('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;
});
});
結果…成功!
上記scriptを組み込んでおけば、もう頭を悩ませることはありません!
宜しければ………