【JavaScript】任意の位置へスクロールさせる方法

概要

JavaScriptで任意の位置へスクロールさせる方法はいくつかある。
document.documentElement.scrollTopはブラウザのバージョンによっては動作しない。
(Microsoft Edgeなど)
要素.scrollIntoView()またはwindow.scrollTo(x, y)を使った方がよい。

• 要素.scrollIntoView()
• window.scrollTo(x, y)
• document.documentElement.scrollTop = y

要素.scrollIntoView()

要素の位置までスクロールさせる。
※InternetExplorerはバージョン8以降で動作する
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView

// id="hoge"の要素までスクロール
document.getElementById('hoge').scrollIntoView();

window.scrollTo(x, y)

座標x, yの位置(単位はpx)までスクロールさせる。
ほぼ全てのブラウザで動作する。
https://developer.mozilla.org/ja/docs/Web/API/Window/scrollTo

// x=0, y=500の位置までスクロール
window.scrollTo(0, 500);

// windowは省略可能なので、以下でも動作する
scrollTo(0, 500);

document.documentElement.scrollTop = y

座標 yの位置(単位はpx)までスクロールさせる。
非対応ブラウザの場合はdocument.body.scrollTop = y;とする必要がある。
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollTop

// y=500の位置までスクロール
document.documentElement.scrollTop = 500;