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座標に設定することでスクロールを実現しているわけです。

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

まとめ

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

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次