【jQuery】 scrollTop()で上下のスクロール量の取得や設定を行う!

上下のスクロール量の取得や設定を行うにはjQueryのscrollTop()メソッドを使用します。

jQueryのscrollTop()メソッドとは上下のスクロール量の取得や設定うメソッドであり、現在のスクロールの位置を取得したり、スクロールの位置を設定して指定した位置へスクロールすることができます。

また、scrollTop()メソッドを使用することで、 トップへ戻るボタンを作成することができ、ユーザにとって見やすいWebサイトを作成することができます。

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

⚫︎ 上下のスクロール量を取得する場合
⚫︎ 上下のスクロール量を設定する場合

⚫︎ scrollTop()の実践的な使い方

ハルトさん

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

さとみさん

お願いします!

scrollTop()とは

scrollTop()とは、要素のプロパティ値を取得したり、設定したりするメソッドとなります。

scrollTop()の書き方

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

scrollTop()を呼び出すことで上下スクロール量を取得することができます。

また、scrollTop()の引数にスクロール位置を指定することで、上下スクロール量を設定することができます。
スクロール位置はpx(ピクセル)となります。

上下のスクロール量の取得や設定を行うサンプルコード

要素のプロパティ値の取得や設定を行うサンプルコードを紹介します。

上下のスクロール量を取得する場合

上下のスクロール量を取得するはscrollTop()の引数を1つ指定します。

sample.html

style.css

index.js

出力結果

scrollTop()を呼び出すことで、スクロール量を取得しています。
そのため、ボタンを押すと、スクロール位置が表示されています。

さとみさん

scrollTop()を呼び出すことで、スクロール位置を取得することができるのですね!

ハルトさん

そうですね。
scrollTop()を引数無しで呼び出すと、現在のスクロール位置を取得するようになります。

上下のスクロール量を設定する場合

上下のスクロール量を設定する場合はscrollTop()の引数にスクロール位置を指定します。

sample.html

style.css

index.js

出力結果

さとみさん

scrollTop()の引数にスクロール位置を指定することで、スクロール位置を設定することができるのですね!

ハルトさん

そうですね。
今回のサンプルコードでは40pxと80pxにスクロールするようにしていますが、Webページの見出し部分にスクロールさせることもできますのでユーザにとってみやすいサイトを作成することができますよ。

scrollTop()の実践的な使い方

scrolltop()の実践的な使い方を紹介してきます。

トップに戻るボタンを作成する

Webサイトのし他の方にあるトップに戻るボタンもscrollTop()を使用することで作成することができます。

sample.html

style.css

index.js

出力結果

scrollTop()の引数を0にすることで、ページのトップ画面にスクロールさせることができます。
そのため、ボタンを押すと、ページの一番上にスクロールしています。

今回のポイント

scrolltop()で上下スクロールの量を取得、設定

⚫︎ 上下スクロールの量を取得や設定を行うにはjQueryのscrollTop()メソッドを使用する

⚫︎ scrollTop()メソッドで上下スクロールの量を取得するにはscrollTop()メソッドを呼び出す

⚫︎ scrollTop()メソッドで上下スクロールの量を設定するにはscrollTop()メソッドの引数にスクロール値を指定する

⚫︎ scrollTop()メソッドでトップへ戻るボタンを作成するにはscrollTop()メソッドの引数のスクロール値を0にする

Writer
壷井

壷井

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

最新の案件情報

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