JavaScriptでスクロール位置を取得・設定する方法について紹介します。
画面と要素とで使う処理が異なるため、それぞれの取得・設定方法について実装例を交えながら解説していきます。
画面
スクロール位置を取得する方法
画面のスクロール位置の取得・設定にはwindow.scrollXやwindow.scrollYを使用します。
scrollXは水平方向のスクロール位置を、scrollYは垂直方向のスクロール位置をそれぞれ取得します。
ここで取得できる値は画面のピクセル数をあらわします。
// 画面の水平方向のスクロール位置を取得
var x = window.scrollX;
console.log(x); // 300
// 画面の垂直方向のスクロール位置を取得
var y = window.scrollY;
console.log(y); // 150スクロール位置を設定する方法
画面のスクロール位置を設定するにはwindow.scroll()を使用します。
引数は2種類設定でき、水平方向のスクロール位置、 垂直方向のスクロール位置の順番に指定します。
たとえば画面のスクロール位置を左上（初期位置）を起点として左から50ピクセル、上から100ピクセルの位置に設定する場合はwindow.scroll(50, 100)と記述します。
また、window.scroll()の代わりにwindow.scrollTo()を使用しても同じ動きとなります。
// 画面の左上にスクロール位置を設定する
window.scroll(0, 0);
// 画面の左から50ピクセル、上から100ピクセルにスクロール位置を設定する
window.scroll(50, 100);
// scrollTo()も動きは同じ
window.scrollTo(50, 100);スクロールの動作を変更する
window.scroll()は引数にオブジェクト形式で設定することも可能です。
引数をオブジェクト形式にした場合、スクロールの動きを変えることができます。
オブジェクトにはleft・top・behaviorの３種類を設定でき、leftに水平方向の位置を、topに垂直方向の位置を、behaviorにスクロールの動きを指定します。
behaviorは"smooth"・"instant"・"auto"のうちどれか１つを指定します。初期値は"auto"です。
またleft・top・behaviorはすべて揃っている必要はなく、任意に省略することが可能です。
// 画面の左から50ピクセル、上から100ピクセルにスクロール位置を設定する
window.scroll({
left: 50,
top: 100,
behavior: "smooth" // smooth、 instant、 auto のうちどれか１つ（初期値はauto）
});
// 任意にプロパティの省略が可能
window.scroll({
left: 150,
behavior: "instant"
});要素
スクロール位置を取得する方法
要素のスクロール位置の取得・設定にはelement.scrollLeftやelement.scrollTopを使用します。
scrollLeftは水平方向のスクロール位置を、scrollTopは垂直方向のスクロール位置をそれぞれ取得します。
window.scrollXやwindow.scrollYと同様に取得できる値は画面のピクセル数をあらわします。
// 要素を取得
var ele = document.getElementById('ele');
// 要素の水平方向のスクロール位置を取得
var x = base.scrollLeft;
console.log(x); // 300
// 要素の垂直方向のスクロール位置を取得
var y = base.scrollTop;
console.log(y); // 150スクロール位置を設定する方法
要素のスクロール位置を設定は取得と同じscrollLeftやscrollTopを使用します。
たとえば画面のスクロール位置を左上（初期位置）に設定する場合はscrollLeft = 0やscrollTop = 0のように記述します。
// 要素を取得
var ele = document.getElementById('ele');
// 画面の左上にスクロール位置を設定する
base.scrollLeft = 0;
base.scrollTop = 0;実装サンプル
以下は要素のスクロール位置を取得・設定する実装サンプルになります。
「スクロール取得」ボタンをクリックすると現在のスクロール位置情報が表示され、「初期位置に戻す」ボタンをクリックするとスクロール位置を左上（初期位置）に戻します。
See the Pen scrollX_scrollY by Usagi (@naniwa_usagi) on CodePen.
まとめ
JavaScriptでスクロール位置を取得・設定する方法について紹介しました。
画面のスクロール位置に応じて処理を呼び出したり、ページの最下部からトップに戻したりする際に活用してみてください。
また以下ではJavaScriptでスクロール位置に応じてCSSスタイルを変える方法を紹介してますので合わせてどうぞ！
