JavaScript - ウィンドウをスクロールする

ウィンドウのスクロール - scrollTo()

window.scrollTo() メソッドは、文書内の特定の座標までスクロールします。window.scrollTo の構文は以下のとおりです。

window.scrollTo(x-coord,y-coord);
window.scrollTo(options);
window.scrollTo() メソッド
x-coord
左上を基準にした表示させたい文書の水平軸上のピクセル値。
y-coord
左上を基準にした表示させたい文書の垂直軸上のピクセル値。
options
以下の3つのプロパティを持たせられるオブジェクト。
top
y-coord と同じです。
left
x-coord と同じです。
behavior
smoothinstantauto のいずれか一つを含む文字列。初期値は auto です。
window.scrollTo( 0, 1000 );

// this changes the scrolling behavior to "smooth"
window.scrollTo({
    top: 1000,
    behavior: "smooth"
});
window.scrollTo() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
12
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

ウィンドウのスクロール - scrollBy()

window.scrollBy() メソッドは、指定された量だけウィンドウ内の文書をスクロールします。window.scrollBy の構文は以下のとおりです。

window.scrollBy(X,Y);
window.scrollBy() メソッド
X
水平方向にスクロールさせるためのピクセル単位でのオフセット。
Y
垂直方向にスクロールさせるためのピクセル単位でのオフセット。

正の座標は、ページを右下にスクロールさせます。負の値は、ページを左上にスクロールさせます。

// 1ページスクロールします
window.scrollBy(0, window.innerHeight);
window.scrollBy() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
12
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

ウィンドウのスクロール - scrollByLines()

window.scrollByLines() メソッドは、指定した行分文書をスクロールします。window.scrollByLines の構文は以下のとおりです。

window.scrollByLines(lines)
window.scrollByLines() メソッド
lines
文書をスクロールする行数です。値は正、または負の整数です。
// 5行分文書をスクロールダウンします。
window.scrollByLines(5);

// 5行分文書をスクロールアップします。
window.scrollByLines(-5);
window.scrollByLines() メソッド
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
12
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

ウィンドウのスクロール - scrollByPages()

window.scrollByPages() メソッドは、指定したページ分文書をスクロールします。window.scrollByPages の構文は以下のとおりです。

window.scrollByPages(pages)
ウィンドウのスクロール
pages
スクロールするページ数です。値は正、または負の整数です。
// 1ページ分文書をスクロールダウンします。
window.scrollByPages(1);

// 1ページ分文書をスクロールアップします。
window.scrollByPages(-1);
ウィンドウのスクロール
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
12
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

関連記事