【JavaScript】スムーススクロールを実装する方法

<header>
 <nav>
  <ul class="nav-menu">
   <li class="nav-item"><a href="#section1">section1</a></li>
   <li class="nav-item"><a href="#section2">section2</a></li>
   <li class="nav-item"><a href="#section3">section3</a></li>
   <li class="nav-item"><a href="#section4">section4</a></li>
   <li class="nav-item"><a href="#section5">section5</a></li>
  </ul>
 </nav>
</header>

<div class="container">
  <section id="section1">
   <p>section1</p>
  </section>
  
  <section id="section2">
   <p>section2</p>
  </section>

  <section id="section3">
     <p>section3</p>
  </section>

  <section id="section4">
   <p>section4</p>
  </section>

  <section id="section5">
   <p>section5</p>
  </section>
</div>

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.nav-menu {
  list-style: none;
}

header {
  background: #02153f;
  padding: 0 10px;
  position: fixed;
  width: 100%;
  height: 84px;
}

nav {
  height: 100%;
}

.nav-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.nav-item:not(:last-child) {
  margin-right: 15px;
}

.nav-item a {
  color: #FFF;
}

.container {
  padding-top: 84px;  
}

section {
  height: 250px;
  display: grid;
  place-items: center;
}

#section1 {
  background: #ff6060;
}

#section2 {
  background: #b2fd87;
}

#section3 {
  background: #62d5e4;
}

#section4 {
  background: #9e97ff;
}

#section5 {
  background: #ff96ed;
}

//href属性の「#」で始まるリンクを全て取得
const links = document.querySelectorAll('a[href^="#"]');
//取得したリンクを1つずつ処理を実行する
links.forEach((link) =>{
　//リンクをクリックしたら処理を実行する
  link.addEventListener('click', (e) => {
　　//リンクイベントをキャンセルする
    e.preventDefault();
    //クリックしたリンクのhref属性を取得
    const href = link.getAttribute('href');
　　//目的のセクションを取得
    const targetSection = document.querySelector(href);
    //画面の上からセクションのtop位置までの垂直方向の距離
    const sectionTop = targetSection.getBoundingClientRect().top;
　　//現在位置を取得
    const currentPos = window.scrollY;
　　//ヘッダーの高さ
    const gap = 84;
    //現在位置から目的のsectionまでのスクロール量
    const target = sectionTop + currentPos - gap;
　　//特定の位置までスクロールさせる
    window.scrollTo({
      top: target,　　　　　//目的の位置のY座標を指定
      behavior: 'smooth',　//スクロールの動きを指定
    });
  });
});