JavaScriptのscrollIntoViewで下端や上端に移動する正しい方法

scrollIntoViewとは

scrollIntoViewはDOM要素のメソッドで、要素がスクロール領域内に収まるようにスクロールします。

便利なメソッドですが、正しい使い方でスクロールされていないことがあります。

MdNのドキュメントにはscrollIntoViewのサンプルのコードが書かれていますが、不要なscroll-margin-topが指定されているなど、使い方が間違っています。

Element: scrollIntoView() メソッド

scrollIntoViewの使い方

まずはスクロールのサンプルの作成のため、必要なHTMLとCSSを以下のように記載します。

HTML

<header class="navbar">navbar</header>
<main class="content">
  <button id="go-to-bottom">下端へ移動</button>
  <button id="go-to-top">上端へ移動</button>
</main>

<header class="navbar">navbar</header>
<main class="content">
  <button id="go-to-bottom">下端へ移動</button>
  <button id="go-to-top">上端へ移動</button>
</main>

CSS

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  height: 50px;
  border-bottom: 2px solid #333;
}
.content {
  position: relative;
  height: 2000px;
  padding-top: 50px;
}
#go-to-bottom {
  position: absolute;
  top: 10px;
}
#go-to-top {
  position: absolute;
  bottom: 10px;
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  height: 50px;
  border-bottom: 2px solid #333;
}
.content {
  position: relative;
  height: 2000px;
  padding-top: 50px;
}
#go-to-bottom {
  position: absolute;
  top: 10px;
}
#go-to-top {
  position: absolute;
  bottom: 10px;
}

MdNのサンプルではscroll-margin-topが使用されていましたが、scrollIntoViewを使うのであれば通常は不要です。

次にボタンをクリックしたときのscrollIntoViewのコードを以下のように書きます。

#go-to-bottomをクリックしたときに#go-to-topのblock: 'start'の位置までスクロールさせ、逆に#go-to-topをクリックしたときは#go-to-bottomのblock: 'end'の位置までスクロールされます。

blockの位置を指定しなかったり、アンカーリンクにして「上端へ移動」をクリックすると、「下端へ移動」のボタン位置が適切な位置に表示されないことが確認できます。

JavaScript

const goToTop = document.getElementById('go-to-top')
const goToBottom = document.getElementById('go-to-bottom')

goToBottom.addEventListener('click', () => {
  goToTop.scrollIntoView({ block: 'start', behavior: 'smooth' })
})

goToTop.addEventListener('click', () => {
  goToBottom.scrollIntoView({ block: 'end', behavior: 'smooth' })
})

const goToTop = document.getElementById('go-to-top')
const goToBottom = document.getElementById('go-to-bottom')

goToBottom.addEventListener('click', () => {
  goToTop.scrollIntoView({ block: 'start', behavior: 'smooth' })
})

goToTop.addEventListener('click', () => {
  goToBottom.scrollIntoView({ block: 'end', behavior: 'smooth' })
})