【JavaScript】scroll()でウィンドウのスクロールを自動で行う!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年07月30日に投稿されました。)

JavaScriptでウィンドウをのスクロールを自動で行う方法として、scroll()があります。

scroll()とは、ウィンドウの指定した箇所へ自動でスクロールすることができるメソッドになります。

そして、引数を指定することで縦と横、どこの位置にスクロールするのかを設定することができます。

ウィンドウをスクロールすることは最短で目的に到達することができるため、ユーザによっても便利な機能です。

そのため、自動でスクロールを行いたいと思った場合は、scroll()を使用するようにしましょう。

今回はJavaScriptのscroll()でウィンドウのスクロールを自動で行う方法について解説していきます。

この記事はこんな方におすすめ
・Topへ戻るボタンを作成したい場合
・自動スクロール処理を追加したい場合

scroll()とは

scroll()とはウィンドウの指定した箇所へスクロールすることができるメソッドとなります。

スクロールを行うことから、マウスでスクロールする動作と同じ動作を自動で実行することができます。

scroll()の書き方

scroll()の書き方は下記のようになります。

セレクタの後ろにscroll()と追記し、引数を2つ指定することで使用することができるようになります。

また、scroll()は下記のようにも記述することができます。

セレクタの後ろにscroll()と追記し、引数を1つ指定することでも使用することができます。

scroll()の引数

scroll()の引数はそれぞれ下記のようになります。

  1. X軸(必須):
    横スクロールするための位置を数値で指定する
  2. Y軸(必須):
    縦スクロールするための位置を数値で指定する
  3. オプション(必須):
    スクロールしたい位置や挙動をオブジェクトで指定する

1つ目の書き方でscroll()は必須な引数として「X軸」と「Y軸」を指定します。

また、2つ目の書き方でscroll()は必須な引数として「オプション」を指定します。

scroll()の返り値

scroll()の返り値はありません。

scroll()でウィンドウのスクロールを自動で行うサンプルコード

scroll()でウィンドウのスクロールを自動で行うサンプルコードをご紹介します。

ここでは、下記の2ケースでscroll()を使用します。

  1. ウィンドウがスクロール可能である場合
  2. ウィンドウがスクロール不可能である場合

ウィンドウがスクロール可能である場合

ウィンドウがスクロール可能なページである場合にscroll()を使用すると、ウィンドウのスクロールが自動で行われます。

● index.html

● style.css

● main.js

実行結果

ウィンドウがスクロール可能である場合にscroll()を使用した結果

scroll()によってウィンドウのスクロールを行っています。

そのため、「スクロール」のボタンをクリックすると、横に「500px」、縦に「150px」のスクロールが自動で行われています。

ウィンドウがスクロール不可能である場合

ウィンドウがスクロール不可能である場合にscroll()を使用すると、ウィンドウのスクロールが行われません。

● index.html

● style.css

● main.js

実行結果

ウィンドウがスクロール不可能である場合にscroll()を使用した結果

scroll()によってウィンドウのスクロールを行っています。

ウィンドウがスクロールできないため、「スクロール」のボタンをクリックしても自動スクロールが行われていません。

オプションを指定してscroll()でウィンドウのスクロールを自動で行うサンプルコード

オプションを指定してscroll()でウィンドウのスクロールを自動で行うサンンプルコードをご紹介します。

オプションには下記の3つを指定することができ、それらを組み合わせることでどの位置へどのようにスクロールするのかを設定できます。

  1. top
  2. left
  3. behavior

そのため、ここでは下記の5ケースでscroll()を使用します。

  1. 自動スクロールを縦方向に行う場合
  2. 自動スクロールを横方向に行う場合
  3. 自動スクロールをスムーズに行う場合
  4. 自動スクロールをジャンプして行う場合
  5. 自動スクロールをデフォルトの設定で行う場合

自動スクロールを縦方向に行う場合

自動スクロールを縦方向に行う場合は、「top」を指定します。

topを指定することで、指定した数値の位置を上からスクロールするようになります。

● index.html

● style.css

● main.js

実行結果

scroll()にtopを指定してウィンドウのスクロールを自動で行った結果

scroll()に「top」を指定してウィンドウのスクロールを自動で行っています。

そのため、「スクロール」ボタンを押すと、横に「0px」、縦に「100px」のスクロールが自動で行われています。

自動スクロールを横方向に行う場合

自動スクロールを横方向に行う場合は、「left」を指定します。

leftを指定することで、指定した数値の位置を左からスクロールするようになります。

● index.html

● style.css

● main.js

実行結果

scroll()にleftを指定してウィンドウのスクロールを自動で行った結果

scroll()に「left」を指定してウィンドウのスクロールを自動で行っています。

そのため、スクロールボタンを押すと、横に「150px」、縦に「200px」のスクロールが行われています。

自動スクロールをスムーズに行う場合

自動スクロールをスムーズに行う場合は、behavoirに「smooth」を指定します。

smoothによってデフォルトの速度よりもスムーズ(ゆっくりめ)にスクロールが行われます。

● index.html

● style.css

● main.js

実行結果

scroll()のbehavoirにsmoothを指定してウィンドウのスクロールを自動で行った結果

scroll()のbehavoirに「smooth」を指定してウィンドウのスクロールを自動で行っています。

そのため、「スクロール」のボタンをクリックすると、横に「250px」、縦に「250px」の自動スクロールがスムーズに行われています。

自動スクロールをジャンプして行う場合

自動スクロールをジャンプして行う場合は、behavoirに「instant」を指定します。

instantによって、指定した位置に一気にジャンプするかのようなスクロールが行われます。

● index.html

● style.css

● main.js

実行結果

scroll()のbehavoirにinstantを指定してウィンドウのスクロールを自動で行った結果

scroll()のbehavoirに「instant」を指定してウィンドウのスクロールを自動で行っています。

そのため、「スクロール」のボタンをクリックすると、横に「275px」、縦に「275px」の自動スクロールがジャンプして行われています。

自動スクロールをデフォルトの設定で行う場合

自動スクロールをデフォルトの設定で行う場合は、behavoirに「auto」を指定します。

こちらはデフォルトで設定されているスクロールが行われるようになります。

● index.html

● style.css

● main.js

実行結果

scroll()のbehavoirにautoを指定してウィンドウのスクロールを自動で行った結果

scroll()のbehavoirに「auto」を指定してウィンドウのスクロールを自動で行っています。

そのため、「スクロール」のボタンをクリックすると、横に「175px」、縦に「200px」の自動スクロールがデフォルトの設定で行われています。

scroll()を使用した実際のケース

scroll()を使用した実際のケースをご紹介します。

固定の位置にスクロールを自動で行う場合

固定の位置に自動スクロールする場合にscroll()を使用することができます。

例えば、ボタンを押すとページの一番上に戻るようなコードを作成します。

● index.html

● style.css

● main.js

実行結果

scroll()で固定の位置にスクロールを自動で行った結果

scroll()で固定の場所にスクロールを自動で行っています。

そのため、ボタンを押すと、自動スクロールでページの一番上に戻っています。

動的の位置にスクロールを自動で行う場合

動的の位置にスクロールを自動で行う場合にもscroll()を使用するることができます。

例えば、「Aについてはこちら」という要素を押すと、Aについての内容が書かれている箇所へ自動でスクロールするようなコードを作成します。

● index.html

● style.css

● main.js

実行結果

scroll()で動的の位置にスクロールを自動で行った結果

scroll()で動的な場所に自動スクロールを行っています。

そのため、「アクセスはこちら」をクリックするとアクセスに関する情報の位置に自動でスクロールします。

Sossy

スクロールする位置を変数で指定しているため、要素の位置が変更になってもアクセスの位置へ必ずスクロールするようになります。

jQueryを使用してウィンドウのスクロールを自動で行う場合

jQueryを使用してウィンドウのスクロールを自動で行うにはscrollTop()scrollLeft()を使用します。

scrollTop()とは、縦方向にスクロールを行うメソッドであり、scrollLeft()とは横方向にスクロールを行うメソッドになります。

● index.html

● style.css

● main.js

実行結果

jQueryのscrollTop()とscrollLeft()でウィンドウのスクロールを自動で行った結果

jQueryのscrollTop()とscrollLeft()によってウィンドウのスクロールを自動で行っています。

そのため、スクロールボタンをクリックすると、横に「400px」、縦に「400px」のスクロールが自動で行われています。

スクロール量を指定してウィンドウのスクロールを自動で行う方法

今回紹介しているscroll()は指定した位置に自動スクロールを行いますが、スクロール量を指定してウィンドウのスクロールを自動で行う方法が存在します。

そのため、ここではスクロール量を指定してウィンドウのスクロールを行う方法を2つご紹介します。

  1. 絶対位置から指定した量のスクロールを自動で行う場合
  2. 相対位置から指定した量のスクロールを自動で行う場合

絶対位置から指定した量のスクロールを自動で行う場合

絶対位置から指定した量のスクロールを自動で行う場合はscrollTo()を使用します。

scrollTo()とは絶対位置(ページの一番左上)から指定した量をスクロールするメソッドになります。

Sossy

scrollTo()は指定した量を自動スクロールしますが、今回紹介しているscroll()は指定した位置に自動スクロールするという意味合いになります。
そんため、ニュアンスとがちがうだけで同じメソッドになります。

● index.html

● style.css

● main.js

実行結果

scrollTo()で絶対位置から指定した量のスクロールを自動で行った結果

scrollTo()によって絶対位置から指定した量のスクロールを行っています。

そのため「スクロール」のボタンを押すと、ウィンドウの左上の位置から横に「150px」、縦に「150px」が自動でスクロールされています。

相対位置から指定した量のスクロールを自動で行う場合

相対位置から指定した量のスクロールを自動で行う場合は、scrollBy()を使用します。

scrollBy()とは、相対位置(現在の位置)から指定した量をスクロールするメソッドになります。

そのため、スクロールされる位置は表示されている箇所によって変化します。

● index.html

● style.css

● main.js

実行結果

scrollBy()で相対位置から指定した量のスクロールを自動で行った結果

scrollBy()によって相対位置から指定した量のスクロールを行っています。

そのため「スクロール」のボタンを押すウィンドウの位置によって、スクロールする位置が変化しています。

ウィンドウのスクロール時に処理を行う方法

ウィンドウのスクロール時に処理を行うには、addEventListener()のイベント名に「scroll」を指定します。

スクロールイベントが発生した後に処理を行うよう設定できるため、scroll()で自動のスクロールを行った瞬間に処理を行うことができます。

● index.html

● style.css

● main.js

実行結果

addEventListener()のイベント名に「scroll」を指定してウィンドウのスクロール時に処理を行った結果

addEventListener()にscrollを指定することで、ウィンドウのスクロール時に処理を行っています。

そのため、ボタンをクリックすると背景色がランダムに変化しています。

まとめ

⚫︎ scroll()とは指定した箇所にスクロールすることができるメソッドである。

⚫︎ scroll()を使用するには書き方によって異なるが、下記の引数を指定する。
1つ目の書き方
・X方向(必須)
・Y方向(必須)
2つ目の書き方
・オプション(必須)

⚫︎ 要素がウィンドウからはみ出している場合にscroll()を指定するとウィンドウスクロールが行われる。

⚫︎ 要素がウィンドウに収まっている場合にscroll()を指定することウィンドウスクロールが行われない。

⚫︎ scroll()はオプションとして下記の項目を組み合わせてスクロール処理を行うことができる。
・top:
数値を指定することで縦方向にスクロール処理を行う
・left:
数値を指定することで横方向にスクロール処理を行う
・behavior:
1.smooth→スムーズにスクロール処理を行う
2.instant→ジャンプしてスクロール処理を行う
3.auto→ブラウザー依存でスクロール処理を行う

⚫︎ jQueryでウィンドウのスクロールを行う場合もscroll()を使用する
(書き方は異なるため注意が必要)

⚫︎ 絶対位置から指定した量のスクロールを行うにはscrollTo()を使用する。

⚫︎ 相対位置から指定した量のスクロールを行うにはscrollBy()を使用する。
(ウィンドウの位置によってスクロールする位置が変化する)

⚫︎ スクロール時に処理を行うには、addEventListener()の引数に「scroll」を指定する。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA