jQueryのscrollTop()メソッドの使い方を現役エンジニアが解説【初心者向け】

初心者向けにjQueryのscrollTop()メソッドの使い方について現役エンジニアが解説しています。scrollTop()メソッドは現在のスクロール位置を取得することが出来ます。現在のブラウザのスクロール位置や特定の位置になったら処理を実行するサンプルを解説しています。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

jQueryのscrollTop()メソッドの使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

jQueryのscrollTop()メソッドの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

スクロール位置とは

ブラウザ内で現在表示している位置のことを指します。

この情報を利用することで、ボタンや表示位置によってページの強制スクロールなどを行えます。
 

jQueryのscrollTop()とは

scrollTop()とは現在のスクロール位置を取得するメソッドです。
 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

jQueryのscrollTop()の使い方

scrollTop()メソッドの構文は以下になります。
 

jQueryオブジェクト.scrollTop();

jQueryオブジェクト.scrollTop(数値);

 

引数を設定しない場合は、指定したjQueryオブジェクトのスクロール位置(Y座標)を取得できます。
引数を設定した場合は、対象のjQueryオブジェクトを引数で指定したスクロール位置に設定します。
 

実際に書いてみよう

現在のブラウザのスクロール位置を表示
 

$(function() {
// スクロールしたら発動
$(window).scroll(function() {

// スクロール量を変数に格納
var scTop = $(this).scrollTop();

// HTMLにスクロール量を表示
$('p').text("ブラウザの先頭から表示位置の先頭までの距離:"+sc);

});
});

 

クリックイベントでブラウザの表示位置を移動させる

 

HTML

<div>

<p>ここをクリックで移動!</p>

</div>

 

JavaScript

$(function() {

// クリックしたら発動
$('p').click(function() {

// ページ先頭の位置に移動
$('body').scrollTop(0);

});
});

 

特定のスクロール位置になったら処理を実行

 

HTML

<div>

<p>ページの先頭です。</p>

</div>

 

JavaScript

$(function() {
// スクロールしたら発動
$(window).scroll(function() {

// スクロール量を変数に格納
var scTop = $(this).scrollTop();

if (scTop == 2000) {

$('p').text("先頭に戻りました。")

}

});
});

 

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)
2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。