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サイトを目指しましょう!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

中沢 丈

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

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

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー