JavaScriptのwindow.scrollとは？指定位置へスクロールする方法を初心者向けに解説
window.scroll() は、ページを指定した座標位置までスクロールさせるためのメソッドです。
X座標（横方向）・Y座標（縦方向）をピクセル単位で指定し、その位置まで一気に移動できます。
scrollメソッドとは？
window.scroll(x, y) は、ページの左上からの距離を基準に、指定した位置までスクロールします。
window.scroll(X座標, Y座標);
- X座標：横方向のスクロール量（px）
- Y座標：縦方向のスクロール量（px）
ページ内の特定位置へジャンプしたいときに便利です。
使用例：指定位置へスクロールする
function clickScroll() {
// 座標 (0, 500) にスクロール
window.scroll(0, 500);
}
// 座標 (0, 500) にスクロール
window.scroll(0, 500);
}
→ ボタンを押すと、ページが縦方向に 500px 移動します。
動作確認用のサンプルコード
以下は、1〜100 の数字を縦に並べたページで、ボタンを押すとスクロール動作を確認できるサンプルです。
<html>
<head>
<title>JavaScript Sample</title>
<script>
function clickScroll() {
// 座標 (0, 500) にスクロール
window.scroll(0, 500);
}
</script>
</head>
<body>
<input type=”button” value=”scroll” onclick=”clickScroll()”>
<table>
<script>
for (let i = 1; i <= 100; i++) {
document.write(“<tr><td>” + i + “</td></tr>”);
}
</script>
</table>
</body>
</html>
<head>
<title>JavaScript Sample</title>
<script>
function clickScroll() {
// 座標 (0, 500) にスクロール
window.scroll(0, 500);
}
</script>
</head>
<body>
<input type=”button” value=”scroll” onclick=”clickScroll()”>
<table>
<script>
for (let i = 1; i <= 100; i++) {
document.write(“<tr><td>” + i + “</td></tr>”);
}
</script>
</table>
</body>
</html>
注意点
- スクロール位置はピクセル単位で指定する
- ページの高さが指定位置より小さい場合は最大位置までしかスクロールしない
- モダンブラウザでは
scrollTo()やscrollBy()の使用が一般的
まとめ
window.scroll()は指定座標へスクロールするメソッド- X・Y座標をピクセル単位で指定する
- ページ内の特定位置へジャンプしたいときに便利
- モダンブラウザでは scrollTo / scrollBy もよく使われる
