【jQuery】scroll()を使ってスクロール時に処理を行う!

スクロール時に処理を行うにはjQueryのscroll()メソッドを使用します。

jQueryのscroll()メソッドとはスクロール中に処理を行うメソッドであり、ページをスクロールしている時に文字列を表示させたり、ボタンを表示させたりすることができます。

例えば、Webページをスクロールしていると右下にTopに戻るボタンがスクロール中に表示されるケースを見たことがあるかと思いますが、そのボタンもscroll()メソッドを使って表示させています。

今回は、jQueryのscroll()メソッドを使ってスクロール時に処理を行う方法について以下の内容で解説していきます。

⚫︎ スクロール時に現在のスクロール座標を取得する場合
⚫︎ Topへ戻るボタンをスクロール時に表示する場合

ハルトさん

今回はjQueryのscroll()メソッドで上下のスクロール量の取得や設定を行う方法について説明していきます。

さとみさん

お願いします!

scroll()とは

scroll()とは、スクロール中に処理を行うメソッドとなります。

scroll()の書き方

scroll()メソッドの書き方は下記となります。

scroll()の引数に関数を呼び出すことでスクロール中にその関数の処理を行うことができます。

スクロール時に処理を行うサンプルコード

スクロールした時に処理を行うサンプルコードを紹介します。

sample.html

style.css

index.js

出力結果

scroll()を呼び出すことで、スクロール中に処理を行っています。
そのため、スクロールすると、「イベント発生!」の文言と「現在日時」がミリ秒単位で表示されています。

さとみさん

scroll()を呼び出すことで、スクロール中に処理を行うことができるのですね!

ハルトさん

そうですね。
scroll()はスクロール中に処理を行うメソッドなので、引数に関数を指定してで呼び出すと、スクロール中に指定した関数が実行されるようになります。

スクロール時に現在のスクロール座標を取得する場合

スクロール時に現在のスクロール座標を取得する場合はscrollTop()メソッドとscrollLeft()メソッドを使用します。

sample.html

style.css

index.js

出力結果

scroll()の引数の関数にscrollLeft()メソッドとscrollTop()メソッドを使用することで現在のスクロール座標を取得しています。
そのため、スクロールすると、現在のスクロール座標が随時表示されます。

scrollLeft()メソッドについて詳しく知りたい場合はこちらをご参考ください。

scrollTop()メソッドについて詳しく知りたい場合はこちらをご参考ください。

Topへ戻るボタンをスクロール時に表示する場合

Webサイトでよく見かけるスクロール時に表示するTopへ戻るボタンもscroll()で作成することができます。

sample.html

style.css

index.js

出力結果

scroll()で、スクロール中に処理が実行されるようになっています。
そのため、スクロール中に、Topへ戻る画面のボタンを表示しており、ボタンを押すとTopに戻るようになります。

さとみさん

このボタンはWebサイトを見ているとよく見るボタンです!
このボタンって下までスクロールしすぎた時にTop画面に戻るのにとても便利なんですよね!

ハルトさん

そうですよね。
Topに戻るボタンはユーザにとってはとても便利なボタンです。
しかし、ずっと表示されていても邪魔なので、サンプルコードのようにある程度スクロールしたらボタンが表示されるよう条件を設定してあげると良いですよ。

今回のポイント

scroll()でスクロール時に処理を行う

⚫︎ スクロール時に処理を行うにはjQueryのscroll()メソッドを使用する

⚫︎ scroll()メソッドでスクロール時に処理を行うにはscroll()メソッドの引数に関数を指定する

⚫︎ スクロール中に現在のスクロール座標を取得する場合はscrollTop()メソッドとscrollLeft()メソッドを使用する

⚫︎ Webサイトでよく見る「Topへ戻るボタン」はscroll()メソッドで作成することができる

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し