[JS]window.scrollTo()で指定座標までスクロールする

こんにちは、むったん（@6ttan）です。

ボタンを押下したら指定要素の頭が画面トップに来る様にして欲しい…なんてお話があった時に役立つコードを書きます。
ちょいちょいそんな機能を含んだコンテンツを作って欲しいと言われるたびに「あのスクロール のなんだっけ…」と思い出すのが面倒なので、自分のメモですね（笑）

座標までスクロールさせる

コード

<div id="el01" class="content">
  <p>要素1</p>
  <button class="js-btn is-next">Next</button>
</div>
<div id="el02" class="content">
  <p>要素2</p>
  <button class="js-btn is-prev">Prev</button>
  <button class="js-btn is-next">Next</button>
</div>
<div id="el03" class="content">
  <p>要素3</p>
  <button class="js-btn is-prev">Prev</button>
</div>

let btns = document.querySelectorAll('.js-btn');
let parent, nextEl, prevEl;
btns.forEach(function(btn) {
  btn.addEventListener('click', function(){
    parent = btn.parentElement;
    if(btn.classList.contains('is-next')) {
      nextEl = parent.nextElementSibling;
      smoothScroll(nextEl);
    } else if(btn.classList.contains('is-prev')) {
      prevEl = parent.previousElementSibling;
      smoothScroll(prevEl);
    }
  })
});

function smoothScroll(target) {
  let elPos = target.getBoundingClientRect().top;
  let offset = window.pageYOffset;
  let pos = elPos + offset;
  window.scrollTo({
    top: pos,
    behavior: 'smooth',
  });
}

要素1にはNextボタンがあり、押下すると要素2へスクロールします。
要素2にはNextボタン＆Prevボタンがあり、それそれ押下すると要素1or要素3へスクロールします。

コードの説明をしますと…

押下したボタンに.is-nextがあれば次の要素へ、.is-prevがあれば前の要素へスクロールする仕組みが書かれています。
smoothScroll関数には、飛び先となる要素のtop位置と現在のスクロール量（Y方向）を取得して、現在の位置からどれくらいスクロールするかを計算しています。

window.scrollTo()では上記の様にoption指定してもいいし、直書きしてもOKです。

直書きの場合はwindow.scrollTo(X方向, Y方向）で指定できますが、レスポンシブデザインなどを採用している場合は画面幅に応じて要素の高さも異なってくるので状況に応じて使用しましょう。

ちなみにbehaviorはsmooth, instant, autoのいずれかになります。

サンプル

See the Pen
Untitled by むったん (@6ttan)
on CodePen.0

参考：mdn web docs – window.scroll