この記事で分かること
window.scroll()の基本的な使い方- X・Y座標を指定してスクロールする方法
- 動作サンプルを使ったスクロールの仕組み
scrollTo/scrollByとの違いと注意点
window.scroll() は、ページを指定した座標位置までスクロールさせるためのメソッドです。
X座標（横方向）・Y座標（縦方向）をピクセル単位で指定し、その位置まで一気に移動できます。
scroll メソッドとは？
window.scroll(x, y) は、ページの左上からの距離を基準に、指定した位置までスクロールします。
window.scroll(X座標, Y座標);
- X座標：横方向のスクロール量（px）
- Y座標：縦方向のスクロール量（px）
ページ内の特定位置へジャンプしたいときに便利です。
ただし、モダンブラウザでは scrollTo() や scrollBy() の使用が一般的です。
使用例：指定位置へスクロールする
function clickScroll() {
// 座標 (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>
注意点
- スクロール位置はピクセル単位で指定する
- ページの高さが指定位置より小さい場合は最大位置までしかスクロールしない
- モダンブラウザでは
scrollTo()/scrollBy()の使用が一般的
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- スクロール処理や座標の概念を基礎から理解したい
- ブラウザの描画・DOM の仕組みを体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
window.scroll() のようなスクロール操作は、JavaScript のDOM・ブラウザ描画・座標系の理解が欠かせません。
書籍ではこれらの基礎を順序立てて学べるため、スクロール処理の仕組みを深く理解できます。
いちばんやさしい JavaScript の教本
図解が多く、DOM やブラウザの動きを視覚的に理解できる入門書です。
スクロール処理の前提となる「座標の考え方」や「ページの構造」を丁寧に学べます。
この本で解決できること：
- DOM とブラウザ描画の基礎がしっかり理解できる
- スクロール位置の指定が直感的に分かる
- 実際に動くサンプルで理解が深まる
確かな力が身につく JavaScript「超」入門
スクロール処理の背景にある「ブラウザの座標系」や「イベントとの連動」を深く理解したい方に最適な入門書です。
実務レベルの UI 実装にも役立ちます。
この本で解決できること：
- スクロール処理の仕組みを体系的に学べる
scroll/scrollTo/scrollByの違いが理解できる- 現代的な JavaScript の書き方が身につく
動画で理解を深めたい方へ（Udemy講座）
スクロール処理は「ページがどのように動くか」を視覚的に理解すると一気に腑に落ちます。
動画で実際のスクロール動作を見ながら学ぶことで、座標指定や UI の動きを直感的に理解できます。
初心者のためのJavaScript 完全入門
DOM 操作・イベント・ブラウザの動作など、スクロール処理の理解に必要な基礎を体系的に学べる人気講座です。
この講座で解決できること：
- スクロール位置の指定方法を視覚的に理解できる
scroll/scrollTo/scrollByの違いが明確になる- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
スクロールアニメーション・UI 操作・イベント連動など、実務で使うスクロール処理を深く理解したい方に最適な講座です。
この講座で解決できること：
- スクロールを使った UI 実装の実践的なテクニックが身につく
- スムーズスクロールなどモダンな手法を学べる
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
- スクロール処理と座標の関係が曖昧なままになる
- DOM とブラウザ描画の理解が断片的になりやすい
- UI 実装でつまずいても相談できない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
スクロール処理のような UI 実装も含めて、ブラウザ動作を体系的に理解できるようサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- DOM・座標・イベントの理解を深めるアドバイスがもらえる
- 効率的な学習方法をプロが提案
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
window.scroll に関するよくある質問（FAQ）
window.scroll() と scrollTo() の違いは？
scroll() は古い書き方で、scrollTo() がモダンな標準メソッドです。動作はほぼ同じです。
スムーズスクロールはできる？
scrollTo() に { behavior: "smooth" } を指定することで可能です。
ページの高さより大きい値を指定したらどうなる？
最大スクロール位置まで移動し、それ以上はスクロールされません。
scrollBy() と scroll() の違いは？
scrollBy() は「現在位置からの相対移動」、scroll() は「絶対位置への移動」です。
まとめ
window.scroll()は指定座標へスクロールするメソッド- X・Y座標をピクセル単位で指定する
- ページ内の特定位置へジャンプしたいときに便利
- モダンブラウザでは
scrollTo()/scrollBy()もよく使われる
