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