外部ページへのアンカーリンクでヘッダー固定の場合、リンク先がずれるのを防ぐ方法
ヘッターを固定している場合に別ページへのアンカーリンクがずれてしまう場合の対策。
$(function(){ //#で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 //ヘッダーの高さ var hedderHeight = 87; var position = target.offset().top - hedderHeight; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); // 別ページからのリンク $(window).on('load', function() { var headerHight = 87; //ヘッダの高さ if(document.URL.match("#")) { var str = location.href ; var cut_str = "#"; var index = str.indexOf(cut_str); var href = str.slice(index); var target = href; var position = $(target).offset().top - headerHight; $("html, body").scrollTop(position); return false; } });
参考サイト
別ページへのアンカーリンクがずれてしまう場合の対策