アンカーリンクがずれるのを、JavaScript（非jQuery）で直したい

Question

現在、文章中のh2、h3から自動で見出しを作り出すJavaScriptを書いています。

以前こちらのサイトでアドバイスで、下記のようにコーディングするといいと教えて頂きました。
下記のjavascriptで動作自体は完璧なのですが、実際のサイトに落とし込むと、アンカーリンクがヘッダーの高さ分ずれてしまうことが分かりました。

window.addEventListener('DOMContentLoaded', ()=>{
    var menu=document.querySelector('#index');
    var ul=document.createElement('ul');
    menu.appendChild(ul);
    [].forEach.call(document.querySelectorAll('h2, h3'),(x,y)=>{
      var url = 'example.html';
      var target = url.slice(0, -5);
      var id= target +(y+1).toString();
      x.setAttribute('id',id);
      var li=document.createElement('li');
      ul.appendChild(li);
      var a=document.createElement('a');
      a.setAttribute('href','#'+id);
      a.textContent=x.textContent;
      li.appendChild(a)
      switch(x.nodeName){
      case "H2":
        /* h2特有の処理がないので空 */
        break;
      case "H3":
        li.classList.add('toc-h3');
        break;
      }
    });
  });

<div id="header">
<ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
</ul>
</div>


              <div id="contents">contents
<div id="index">
    <p class="toc-title">目次</p>
    <!-- ここに目次が<ul><li></li></ul>の形で表示される -->
</div>

<div class="articleComponent">
    <h2>H2の1個目</h2>
</div>
<div class="articleComponent">
    <p class="articleText">テキスト</p>
</div>

<div class="articleComponent">
    <h2>H2の2個目</h2>
</div>
<div class="articleComponent">
    <p class="articleText">テキスト</p>
</div>

<div class="articleComponent">
    <h2>H2の3個目</h2>
</div>
<div class="articleComponent">
    <p class="articleText">テキスト</p>
</div>
<div class="articleComponent">
    <h2>H2の4個目</h2>
</div>
<div class="articleComponent">
    <p class="articleText">テキスト</p>
</div>

<div class="articleComponent">
    <h2>H2の5個目</h2>
</div>
<div class="articleComponent">
    <p class="articleText">テキスト</p>
</div>
<div class="articleComponent">
        <h2>H2の6個目</h2>
    </div>
    <div class="articleComponent">
        <p class="articleText">テキスト</p>
    </div>
    
    <div class="articleComponent">
        <h2>H2の7個目</h2>
    </div>
    <div class="articleComponent">
        <p class="articleText">テキスト</p>
    </div>
    
    <div class="articleComponent">
        <h2>H2の8個目</h2>
    </div>
    <div class="articleComponent">
        <p class="articleText">テキスト</p>
    </div>
    <div class="articleComponent">
        <h3>H3の内容</h3>
    </div>
    <div class="articleComponent">
        <p class="articleText">テキスト</p>
    </div>
    <div class="articleComponent">
        <h3>H3の内容</h3>
    </div>
    <div class="articleComponent">
        <p class="articleText">テキスト</p>
    </div>
    
    <div class="articleComponent">
        <h2>H2の9個目</h2>
    </div>
    <div class="articleComponent">
        <p class="articleText">テキスト</p>
    </div>
    </div>

    #header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: #333;
  color: #fff;
  z-index: 1;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

#header.thin {
  width: 100%;
  height: 60px;
}

#header li {
  float: left;
  display: block;
  padding: 5px 20px;
  margin-top: 15px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

#header.thin li {
  margin-top: 0;
}

#contents {
  height: 800px;
  margin-top: 100px;
}

#footer {
  height: 80px;
  background: #666;
  color: #fff;
}

現在（目次自動生成JavaScript導入前）は、jQueryで下記のように制御しています。

function() {
  var speed = 400;
  var href = $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var headerHeight = 140; //固定ヘッダーの高さ
  var position = target.offset().top - headerHeight; //ターゲットの座標からヘッダの高さ分引く
  $('body,html').animate({
    scrollTop: position
  }, speed, 'swing');
  return false;
}

※上記のjQueryは本番で使用しているものです。
サンプルコードでは、下記のjQueryを使用しています。

<script>$(function() {
            var dist = 50;
            $(window).scroll(function() {
              if ($(window).scrollTop() > dist) {
                $('#header').addClass('thin');
              } else {
                $('#header').removeClass('thin');
              }
            });
          });</script>

しかし、一番上の目次自動生成JavaScriptを導入すると、jQueryでの高さのずれ調整が聞かなくなってしまいます。そのため、目次自動生成JavaScriptのコードに、ずれ調整コードを入れ込みたいと思っています。

.scrollTo()を使用すれば、jQueryでいうところのanimate(scrollTop) の部分のような動作が実装できそうなのですが、その先の書き方が分かりません。

どなたか、この2つのJavaScriptとjQueryを合体させる方法をアドバイスいただけないでしょうか。よろしくお願いします。

Answer 1

目次生成にはVanilla JavaScriptを使用せず、jQueryに統一したところ、もともとあった高さを揃えるjQueryも動くようになりました。その他、同じJavaScriptが何度も読み込まれていたり、使用しているjQueryのバージョンがちがかったりしたため、思う通りの動作が出来ないでいたようでした。

<script  src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

　　　// 目次生成用jQuery、クラス名などは未修正
      $(function(){
        var countId = 1
        $("h2, h3").each(function(){
          var ttl = $(this).text();
          var lv = this.nodeName.toLowerCase();
          this.id = 'ttl-' + countId;
          countId ++;
          $("#index").append('<dd class="lv_'+lv+'"><a href="#'+this.id+'">'+ttl+'</a></dd>');
        });
      });

      // ヘッダーの高さ分、リンク先の見出しの表示位置をずらす
      $(function(){
        $('a[href^=#]:not([class*="modal"])').click(function() {
            var speed = 400;
            var href= $(this).attr("href");
            var target = $(href == "#" || href == "" ? 'html' : href);
            var headerHeight = 300; //固定ヘッダーの高さ
            var position = target.offset().top - headerHeight; //ターゲットの座標からヘッダの高さ分引く
            $('body,html').animate({scrollTop:position}, speed, 'swing');
            return false;
          });
        });

Answer 2

CSSに下記を追記しましょう

html{
  scroll-behavior: smooth;
}

[id^=example] {
  margin-top: -100px;
  padding-top: 100px;
}

1つ目は、スクロールの動作をスムーススクロールにしてくれます

2つ目は裏技的な認識で覚えてればいいと思います。
（高さは、ズレる分だけ入れましょう。）

参考リンク
1つ目について
2つ目について

※Chromeを使用している想定の回答になります。

Comments

[vankick]

ありがとうございます。IEを捨てることが出来なかったため、scroll-behaviorのみでの解決は見送ることになっていました。

Answer 3

８行目あたりの
var id= target- +(y+1).toString();
「target-」となっていますがマイナスはゴミです

ヘッダーの高さ分ずれてしまう

ヘッダーとは何でしょう？

.scrollTo()を使用すれば

スムーススクロールをしたいのでしょうか？

Comments

[vankick]

コメント頂きましてありがとうございます。

言葉足らずですみません。
今したいことは、
・スムーススクロール
・スクロール後にヘッダーの高さが小さくなるため、リンク先の位置が、小さくなったヘッダーの高さ分（140px分）上にずれる。アンカー先の見出しの表示位置を今より140px下にずらしたい

という意味でした。
DOMContentLoadedの他にもう一つクリックイベントを設定して、クリックした時にスムーススクロールさせ、表示位置を変更するスクリプトを書いたらいいのでしょうか…なかなか解決ができません。

[yambejp]

HTMLで例示していいないヘッダ的ななにかがあるのですね？
<header>もしくは<div id="header">

メニューをクリックした時にその高さが140へる？
たとえば200pxが60pxになるとか？
その処理がどうしたいかによってズレを修正する方法は
変わってくると思います

あと、回答で指摘したtarget-について質問文のソース
修正しておいてください

[vankick]

target- の部分、修正しました。
その他、ヘッダーのソースを追加しました。
h2の1番目、h2の2番目などをクリックすると、上にずれます。
そのずれを、ヘッダーにかぶらないようにしたいと思っています。