ヘッダー固定時のページ内外リンクのずれ解消(もちろん、スムーススクロール)
- 公開日: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; } });