外部ページへのアンカーリンクでヘッダー固定の場合、リンク先がずれるのを防ぐ方法

ヘッターを固定している場合に別ページへのアンカーリンクがずれてしまう場合の対策。

 

$(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;
}

});

 

 

参考サイト

https://ko-e-da.com/92

 

 

category cloud