【JavaScript】簡単でスムーズなページ内リンクのスクロール 【コピペでOK！】

よく使う割にはやり方を忘れることがあったため、備忘録として綴っておきます。
下記はVue.jsのコードですが、ネイティブのJavaScriptでもmethodsやmounted内をコピペで実装できます。

// HTML
  <div>
    <div id="FirstView"></div>
    <div id="SecondView"></div>
    <div id="ThirdView"></div>
    <nav class="header">
      <ul>
        <li @click="scroll('FirstView')">FirstView</li>
        <li @click="scroll('SecondView')">SecondView</li>
        <li @click="scroll('ThirdView')">ThirdView</li>
      </ul>
    </nav>
  </div>


// Js
  data() {
    return {
      scrollY: 0,
    };
  },
  methods: {
    scroll(target) {
      // 遷移先取得
      const element = document.getElementById(target);
      if (element) {
        // 画面上端から要素上部分までの高さ + スクロールしていた場合はスクロール量も加算
        const position = element.getBoundingClientRect().top + this.scrollY;
        //  スクロールする
        window.scrollTo({
          top: position,
          behavior: "smooth",
        });
      }
    },
    getScroll() {
      // スクロール量取得
      this.scrollY = window.scrollY;
    },
  },
  mounted() {
    // イベント設定
    window.addEventListener("scroll", this.getScroll);
  },
};