ヘッダ固定のサイトで、別ページへのアンカーリンクの位置

| | コメント(0)

ネットで検索してみると、?id=とかをつけて......というのが多かったけど、普通の#でもいけるよね......?
というか、普通アンカーリンクって#でつけるから、#じゃないと使い勝手が悪い。
 
ヘッダ固定部分が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);
}
}
});

コメントする