jquery - タグの問題へのヘッダースクロールを修正

Question

ヘッダーのリンクをタグにスクロールする際に問題が発生しています。これは固定ヘッダーであるため、領域を超えてスクロールし、コンテンツはヘッダーの後ろにあります。ヘッダーの下部に移動する場所に修正するにはどうすればよいですか? box-sizing: border-box;それがそれと関係がある場合も使用しています。助けてくれてありがとう。

ここにjqueryがあります：

$(".scrolltotag").click(function(event){        
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 600);
});

ナビゲーション内のすべてのリンクには、クラスscrolltotagとhref="#tag"

Answer 1

- $('header').outerHeight()おかげさまで追加することで修正できまし$('html,body').animate({scrollTop:$(this.hash).offset().topた！

Answer 2

// ヘッダーの高さを取得

var headerHeight = $(".header").height();

// クリックイベントを添付

$('a[href*=#]').bind("クリック", function(e) { e.preventDefault();

var target = $(this).attr("href"); var scrollToPosition = $(target).offset().top - headerHeight;

$('html').animate({ 'scrollTop': scrollToPosition }, 600, function(){ window.location.hash = "" + target;

$('html').animate({ 'scrollTop': scrollToPosition }, 0); }); });