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

現在、文章中の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を合体させる方法をアドバイスいただけないでしょうか。よろしくお願いします。

同じタグがついた質問を見る