ヘッダー固定時のページ内外リンクのずれ解消(もちろん、スムーススクロール)
- 公開日：2020/11/21
position:fixedで固定している時にアンカーリンク（ページ内もページ外も）で移動後の位置がヘッダーの高さ分だけずれてしまう対応のメモです。ページ内リンクの場合はスムーススクロールも対応します！
cssだけで対応する（ヘッダーの高さ分paddingとmarginを相殺する）方法もありますが、個人的にあまり好きではないのでjQueryで対応します。
ページ内リンクの場合（固定しているヘッダーの高さを100pxとする）
$(function(){
var headerHeight = 100; // ヘッダーの高さ
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top - headerHeight;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
ページ外リンクの場合（固定しているヘッダーの高さを100pxとする）
$(window).on('load', function() {
var headerHeight = 100; // ヘッダーの高さ
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 - headerHeight;
$("html, body").scrollTop(position);
return false;
}
});