アンカーリンクの位置がファーストビュー時のみズレる

Question

アンカーリンクをブロック毎に設定し、メニューから飛ばしたいのですが、アンカーリンク位置の取得がおかしいのです。

現状の仕様

・calender-date__listのリンクを押すと、同じハッシュタグのあるブロックまで遷移する。
・スクロールすると、ヘッダーとcalender-dateは固定になるため、その高さを差し引いてスクロールする

できていない問題

・一番最初（ファーストビュー）の段階でcalender-date__listをクリックすると、ヘッダーとcalender-date分の高さを越えたところに飛ぶ。
・途中までスクロールした後、リンクをクリックすると、問題なく動作する。

ソース内容から、原因などわかりますでしょうか？
何かヒントいただけると助かります。よろしくお願いします。

<header class="header">メニューなど</header>
<div class="dread-list">パンくずリストブロック</div>

<main class="page">

<h1>タイトル</h1>


<section>

<div class="calender-date">
<div class="date"></div>
    <ul class="calender-date__list">
        <li class="is-current"><a href="#month01">2021.7</a></li>
        <li><a href="#month02">2021.8</a></li>
        <li><a href="#month03">2021.9</a></li>
    </ul>
</div>

<div class="calender-schedule-month" id="month01">
<h2>2021.7</h2>
<div class="calender-schedule"></div>
<!-- end .calender-schedule -->
<div class="calender-schedule"></div>
<!-- end .calender-schedule -->
</div>
<!-- end .calender-schedule-month -->


<div class="calender-schedule-month" id="month02">
<h2>2021.8</h2>
<div class="calender-schedule"></div>
<!-- end .calender-schedule -->
<div class="calender-schedule"></div>
<!-- end .calender-schedule -->
</div>
<!-- end .calender-schedule-month -->

<div class="calender-schedule-month" id="month03">
<h2>2021.9</h2>
<div class="calender-schedule"></div>
<!-- end .calender-schedule -->
<div class="calender-schedule"></div>
<!-- end .calender-schedule -->
</div>
<!-- end .calender-schedule-month -->


</div>
</section>
</main>

<footer class="footer">フッター</footer>

//calender-dateのfixed指定（headerは別途全画面共通でjsで指定）
$(function(){
  var win = $(window);
  var headH = $('.header').outerHeight(true);
  var month = $('.calender-date');
  var monthPosi = $('.calender-date').offset().top - headH;
  win.on('scroll',function(){
    var scr = win.scrollTop();
    if(scr > monthPosi){
      month.addClass('is-fixed');
    }else{
      month.removeClass('is-fixed');
    }
  });
});

//月の切り替え
$(function(){
	$('.calender-date__list li a').click(function(){
		var href = $(this).attr('href');
		var target = $(href == '#' || href == '' ? 'html' : href );
        var headH = $('.header').outerHeight(true),
            menuH = $('.calender-date').outerHeight(true),
            sumH = headH + menuH;
		var position = target.offset().top;
        console.log(position);
		$('html, body').animate({scrollTop:position - sumH + 5}, 400, 'swing');
		return false;
	});
	var sectionArr = new Array(),
		elIndex = $('.calender-date__list li a');
	for(i=0; i < elIndex.length; i++){
		var elLink = elIndex.eq(i).attr('href');
		sectionArr[i] = elLink;
	}
	$(window).on('load resize scroll', function(){
		var top = $(window).scrollTop();
		for(i=0; i < sectionArr.length; i++){
            var headH = $('.header').outerHeight(true),
                menuH = $('.calender-date').outerHeight(true),
                sumH = headH + menuH;
			var target = sectionArr[i],
				secTop = $(target).offset().top - sumH,
				secBottom = secTop + $(target).outerHeight(true);
			if(secTop <= top && secBottom >= top){
				elIndex.parent().removeClass('is-current');
				elIndex.eq(i).parent().addClass('is-current');
			}
		}
	});

});

Comments

[itagagaki]

問題が再現できないというか、どういう問題なのかがそもそもわからないのですが。
CSSが無いからでしょうか。