【jQuery入門】scrollTop()で画面のスクロール位置を取得・設定する方法！

こんにちは、ライターのマサトです！

今回は、画面のスクロール位置を取得することができる「scrollTop()」メソッドについて学習をしていきましょう！この記事では、

という基本的な内容から、

などの応用的な使い方に関しても解説していきます。この記事で、「scrollTop()」をしっかり学習して自分のスキルアップを目指しましょう！

「scrollTop()」とは？

それでは、まず最初に「scrollTop()」メソッドの基本的な知識から学習をしていきましょう！

「scrollTop()」は、ブラウザの画面をスクロールした時の位置（スクロール量）を取得できるメソッドになります。

このスクロール位置というのは、画面端に現れる「スクロールバー」の位置と言い換えることもできるでしょう。また、取得だけでなく任意の数値を設定することで、意図的に指定した位置に移動させることも可能です。

これにより、スクロールに応じてコンテンツを変化させたり、画面上部に戻るボタンを作成することが簡単にできます。

本記事では、「scrollTop()」の基本から応用まで体系的に学べるように構成しているので、ぜひ参考にしてみて下さい！

「scrollTop()」の使い方

この章では、「scrollTop()」の基本的な使い方について見ていきましょう！一般的な構文から実際のプログラミング手法として、スクロール位置の取得や設定を学んでいきます。

基本的な構文と書き方について

まずは、最も基本となる構文から見ていきましょう！「scrollTop()」は、スクロール位置を取得したいHTML要素を対象にして実行するのが基本となります。

対象要素.scrollTop( 値 )

一般的に画面のスクロール位置を取得したい場合には、対象要素は「window」になります。

引数の「値」は、数値を設定することで任意のスクロール位置まで移動させることが可能になります。

引数は省略可能で、その場合には対象となる要素のスクロール位置を取得することができるので覚えておきましょう！

画面のスクロール位置を取得する方法

それでは、「scrollTop()を利用してブラウザ画面のスクロール位置を取得してみましょう！一般的にスクロール位置を取得するには、画面が上下に移動するスクロール量を連続的に知る必要があります。

このようなケースで便利なのが「scroll()」イベントです。これらを組み合わせて、画面のスクロール位置を取得するには次のように記述します！

$(window).scroll(function() {

    console.log($(this).scrollTop());

})

まずは画面のスクロール位置を知りたいので、対象となる要素は「window」になる点に注意しておきましょう。

そして、「scroll()」イベント処理内でscrollTop()を実行することで、画面が上下に移動する度にスクロール位置を取得できるわけです。コンソールにはスクロール量がズラッと出力されているはずです！

任意のスクロール位置に設定する方法

今度は、意図的にスクロール位置を設定することで画面を移動させる方法について見ていきましょう！方法としては、「scrollTop()」、の引数に移動させたい位置を数値で指定するだけなので簡単です。

次のサンプル例を見て下さい！

$('button').click(function() {
  
    $(window).scrollTop(300);
  
})

この例では、ボタンをクリックすると引数が設定された「scrollTop()」が実行されます。

引数には「300」という数値が設定されているので、画面の縦方向に300進んだ位置に移動することになります。

数値がどのくらいか分からない場合は、前章のサンプルみたいにスクロール位置を取得しながら決めると良いでしょう。

「offset().top」と「scrollTop()」の違い

「scrollTop()」の類似メソッドとして「offset().top」があるので合わせてご紹介しておきます。

「offset().top」は特定のHTML要素が配置されている座標を取得するのに使われるメソッドになります。

そのため、「scrollTop()のように画面のスクロール位置を連続的に取得するような用途には向いていません。例えば、「aタグ」が配置されている座標を知りたい時は次のように記述します。

$('a').offset().top;

このように対象となる要素に「offset().top」を実行することで、「aタグ」のY座標を取得できるわけです。

「offset()」の基本的な使い方や活用事例は次の記事で詳しくまとめているので、ぜひ参考にしてみてください！

【jQuery入門】offset()で要素の位置を取得・設定する方法！

更新日：2024年3月1日

アニメーションについて

この章では、「scrollTop()」をさらに活用できるアニメーション手法について見ていきましょう！主に、「animate()」メソッドによる組み合わせ技について学んでいきます。

animate()によるアニメーション移動の作り方

「animate()」を使うと、例えば画面移動などでゆっくりとスムーズに移動するアニメーションを簡単に作れます。例えば、画面を300の位置に移動するには「scrollTop()」を使って次のように記述しましたよね？

$(window).scrollTop(300);

これを「animate()」を使ってスムーズなアニメーションを実現するには次のように記述します。

$('html, body').animate({scrollTop:300});

対象要素を「window」から「html」もしくは「html, body」に指定して「animate()」を実行するようにします。

あとは引数に「scrollTop: 300」と記述することで、アニメーションしながら300の位置まで画面が移動するのです。

また、「offset().top」と組み合わせることで任意のHTML要素まで移動することも可能です。次のサンプル例を見て下さい！

$('button').click(function() {

    var h1 = $('h1').offset().top;

    $('html, body').animate({scrollTop:h1});

});

この例では、クリックイベント内に「offset().top」と「animate()」>を組み合わせて実行しているのが分かりますね。

処理としては、h1要素に「offset().top」を実行することで座標を取得し、それをanimate()の引数に設定しているわけです。

つまり、ボタンをクリックすることでh1要素が画面上部に来るまでアニメーションして移動してくれるというわけです。

まとめ

今回は、画面のスクロール位置を取得することができる「scrollTop()」について学習しました！最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！