ボタンクリックで対応する要素にスクロール（Vanilla JS版）

<ul class="btnlist">
	<li>ボタン1</li>
	<li>ボタン2</li>
	<li>ボタン3</li>
	<li>ボタン4</li>
	<li>ボタン5</li>
	<li>ボタン6</li>
</ul>

<div class="contents">
	<div class="item">
	　<p>コンテンツ1</p>
	</div>
	<div class="item">
	　<p>コンテンツ2</p>
	</div>
	<div class="item">
	　<p>コンテンツ3</p>
	</div>
	<div class="item">
	　<p>コンテンツ4</p>
	</div>
	<div class="item">
	　<p>コンテンツ5</p>
	</div>
	<div class="item">
	　<p>コンテンツ6</p>
	</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
  // スクロール対象の要素（.item）を取得
  const items = document.querySelectorAll(".contents .item");

  // クリック対象のボタン（li）を取得
  const buttons = document.querySelectorAll(".btnlist li");

  // 各 .item のスクロール位置を配列に格納
  // → 要素のブラウザ内の位置 (getBoundingClientRect().top)
  // ＋ 現在のスクロール量 (window.pageYOffset)
  // ＝ ページ全体における位置
  const positions = Array.from(items).map(el =>
    el.getBoundingClientRect().top + window.pageYOffset - 20 // 20pxだけ上に余白を残す
  );

  // ボタンごとにクリックイベントを設定
  buttons.forEach((btn, index) => {
    btn.addEventListener("click", () => {
      // クリックされたボタンと同じ順番の要素位置を取得してスクロール
      window.scrollTo({
        top: positions[index],
        behavior: "smooth" // スムーススクロール
      });
    });
  });
});
</script>