【JavaScript入門】a要素クリック時に指定した要素までスムーススクロールする方法

<a href="#content1">コンテンツ1へ移動</a>
<a href="#content2">コンテンツ2へ移動</a>
<a href="#content3">コンテンツ3へ移動</a>
<a href="#content4">コンテンツ4へ移動</a>
<a href="#content5">コンテンツ5へ移動</a>
<a href="#content6">コンテンツ6へ移動</a>
<h2 id="content1" class="main">コンテンツ1</h2>
<h2 id="content2" class="main">コンテンツ2</h2>
<h2 id="content3" class="main">コンテンツ3</h2>
<h2 id="content4" class="main">コンテンツ4</h2>
<h2 id="content5" class="main">コンテンツ5</h2>
<h2 id="content6" class="main">コンテンツ6</h2>
<a href="#content1">コンテンツ1へ移動</a>
<a href="#content2">コンテンツ2へ移動</a>
<a href="#content3">コンテンツ3へ移動</a>
<a href="#content4">コンテンツ4へ移動</a>
<a href="#content5">コンテンツ5へ移動</a>
<a href="#content6">コンテンツ6へ移動</a>

.main {
    height: 300px;
}
#content1,#content4  {
    background-color:pink;
}
#content2,#content5 {
    background-color:aqua;
}
#content3,#content6 {
    background-color:lime;
}

window.addEventListener('load', (event) => {

    document.querySelectorAll('a[href^="#"]').forEach(e => e.addEventListener('click', function(e){

        //a要素のクリックイベントをキャンセル。
        e.preventDefault();

        //a要素が持つhref属性の値を取得。（#content1のように先頭に#が付いた状態で取得される。）
        let target = e.target.getAttribute("href");

        //指定した要素までの距離を取得。
        let targetTop = document.querySelector(target).getBoundingClientRect().top + window.pageYOffset;

        let scrollOptions = {
          left: 0,
          top: targetTop,
          behavior: 'smooth'
        }

        //指定した要素へスクロールする。
        window.scrollTo(scrollOptions);
    }));

});