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()の使用が一般的
JavaScript 初心者におすすめの学習書籍
手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。
→ いちばんやさしい JavaScript の教本
JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。
→ 確かな力が身につくJavaScript「超」入門
体系的に学びたい方へ（スクールという選択肢）
JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。
短期間で基礎を固めたい方や、効率よくスキルを身につけたい方に最適です。
→ DMM WEBCAMP 学習コース（無料相談はこちら）
まとめ
window.scroll()は指定座標へスクロールするメソッド- X・Y座標をピクセル単位で指定する
- ページ内の特定位置へジャンプしたいときに便利
- モダンブラウザでは scrollTo / scrollBy もよく使われる
