JavaScriptで画面をスクロール! scrollToとscrollByの使い方

こんにちは!エンジニアの中沢です。

WEBサイトなどを作っているとき、ユーザーの行動によって画面のスクロールを自動的にする機能が欲しくなったりしませんか?具体的にいうと、ページトップに戻るボタンとかですね。

でもどうやって実装するんだろう…

という疑問をお持ちの方、今回の記事は必見です。JavaScript画面をスクロールするためのscrollToメソッドとscrollByメソッドについて解説していきます。コピペで使えるサンプルコードも紹介しているので、ぜひ活用してみてください!

どんな時に使える?

今回紹介するscrollToメソッドとscrollByメソッドは、指定した位置にスクロールして移動することができるメソッドです。例えばclickイベントと組み合わせて、クリックしたら指定した位置にスクロールさせる、ということができるわけですね。

もちろん他のイベントとも組み合わせ可能なので、任意のタイミングでスクロールを発生させることができるのです。scrollToメソッドとscrollByメソッドの違いは、次の項目から解説していきましょう。

絶対位置を指定してスクロール/scrollTo

scrollToメソッドでは、絶対位置を指定してスクロールをさせることができます。絶対位置とは、全体に対してどの位置なのか、という指定の方法です。

画像:絶対位置の解説

scrollToメソッドは第一引数にx座標、第二引数にy座標のスクロール量を指定します。このスクロール量は、ピクセル単位で指定します。次のプログラムで確認してみましょう。

scrollTo(100, 200);

このプログラムを実行すると、右に100px、下に200px画面がスクロールします。

相対位置で指定してスクロール/scrollBy

scrollByを使う場合は、相対位置で指定してスクロールさせることができます。相対位置とは現在のスクロール位置を基準として、そこからどれだけの量をスクロールするのか指定することです。

画像:相対位置の解説

引数はscrollToメソッドと同じく、第一引数にx座標、第二引数にy座標のスクロール量をピクセルで指定します。次のプログラムで確認してみましょう。

scrollBy(100, 200);

このプログラムを実行すると、現在の画面位置から右に100px、下に200px画面がスクロールします。最初の位置が右に50px、下に100px動いた位置だとすると、最終的な位置は右から150px、下に300px動いた位置になるということですね。

コピペで使えるスクロール実装例

scrollToメソッドやscrollByメソッドは単体での出番は少なく、何かしらのイベントなどと組み合わせることが多いです。今回はそんな組み合わせの例として、いくつかサンプルコードを用意してみました。コピペして使えるようにしてあるので、活用してみてください。

TOPへ戻るボタン

最近は縦長のサイトも増えてきて、ページのTOPに戻るボタンの有る無しは結構重要ですよね。そんなページトップへ戻るボタンは、下記のように書くことで実装可能です。

See the Pen js-scroll1 by 河野七海 (@kouno73) on CodePen.0

ボタンがクリックされたらscrollToメソッドで一番上に戻るようにしています。

指定要素の位置へスクロール

引数は数値でとありますが、もちろん変数で指定するのもOKです。下記のように要素を指定して位置を取得し、その位置にスクロールさせるということも可能なのです。

See the Pen js-scroll2 by 河野七海 (@kouno73) on CodePen.0

何秒か経ったらスクロール

何秒か経過したらスクロールさせるとちょっとおしゃれかなと思って、ざっくり作ってみました。

See the Pen js-scroll3 by 河野七海 (@kouno73) on CodePen.0

setTimeoutでタイマー処理を入れることで実現しています。

また、scrollBy()を利用しても同様なことが可能で、以下のサンプル例では5秒後に1画面分スクロールします。

setTimeout(function() {

  window.scrollBy(0, window.innerHeight);

},5000);

window.innerHeight()で表示されている画面の高さを取得できるので、これをscrollBy()のY座標に設定することでスクロールを実現しているわけです。

タイマー処理の詳しい方法が知りたい!という方は、下記の記事を参考にしてみてください。

【JavaScript入門】setTimeoutの使い方とサンプル事例まとめ!
更新日 : 2019年1月25日

まとめ

いかがでしたか?画面を好きな場所までスクロールできるので、上手く活用するともっと色々な動きをつけることができます。ぜひ活用して、素敵なWEBサイトを目指しましょう!

書いた人

中沢 丈

フリーランスエンジニア。
システム開発からコンテンツ作成まで幅広く対応します。

連絡先はこちらです。
[email protected]

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI ENGINEER Plus

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら