MENU

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

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

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

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

 

目次

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

※ヘッダー固定が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);
}
}
});
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

40代webクリエイター
1人が好き、家が好き、副業と投資でお金貯めてます
31歳で貯金200万円、41歳で2000万円、43歳で2400万円達成中

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次