ガラ

ここからはじめよう

2018.09.07
jQuery

ヘッダーを固定していると別ページへのアンカーリンクがずれる

ヘッダーを固定しているサイトで面倒くさいのがアンカーリンク。

ページ内でもページ外でも…

ヘッダー固定している分すれてしまいます。

 

そんな時はアンカーリンクをしているページにこちらのコードを。

※ヘッダー固定が120pxの場合。

$(window).on('load', function() {
var url = $(location).attr('href');
if(url.indexOf("#") != -1){
var anchor = url.split("#");
var target = $('#' + anchor[anchor.length - 1]);
if(target.length){
var pos = Math.floor(target.offset().top) - 120;
$("html, body").animate({scrollTop:pos}, 500);
}
}
});

お勧めの記事

過去の記事