一定の位置までスクロールすると、上部に固定されるヘッダーを使っています。
ヘッダー固定時に、ページ内リンクの高さのずれを解消するため、JavaScriptで調整しようとしています。
以下のページを参考にしました。
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい
しかし、offset().topの値がヘッダー固定前と固定後でずれているようです。
該当のソースコード
js
1$(function () { 2 $('a[href^="#"]').click(function () { 3 //ヘッダーの高さを取得 4 var headerHeight = $('.scroll-header').height(); 5 console.log(headerHeight); 6 //アンカーの値取得 7 var href = $(this).attr("href"); 8 //移動先ターゲットを取得 9 var target = $(href == "#" || href == "" ? 'html' : href); 10 console.log(target); 11 //ターゲットの座標を取得 12 var target_offset = target.offset().top; 13 console.log(target_offset); 14 var position = target.offset().top - headerHight; //ヘッダの高さ分位置をずらす 15 $("html, body").animate({ scrollTop: position }, 400, "swing"); 16 return false; 17 }); 18});
移動先のターゲット(var target)は、ヘッダー固定前と固定後で、値は変わりません。
しかし、ターゲットの座標を取得すると、ヘッダー固定前と固定後で値が変わっています。
試したこと
target.offset().topをtarget.get( 0 ).offsetTopにしたりしてみましたが、解決できず。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/02 15:17