jQueryのscrollTopとは？scrollTopを正しく使いこなそう！

システム
エンジニア

スクロール位置を取得できるメソッドについて教えてください。

プロジェクト
マネージャー

scrollTopメソッドですね。Web画面の縦スクロール位置を取得できるメソッドです。

jQueryのscrollTopとは？

jQueryはJavaScriptで利用できる多機能なライブラリです。その機能の1つのscrollTopメソッドは、Web画面の縦スクロール位置を取得したり、縦スクロール位置を設定することができます。これを使ったアニメーション処理を実現することもできます。

なおこの記事のjQueryのサンプルを利用する場合は、htmlのheadタグに以下を記述してください。jQueryのバージョンは以下が最新とは限りませんが、最新でなくても動作はします。

<script src=”https://code.jquery.com/jquery-3.5.1.min.js”></script>

スクロール位置の取得

縦のスクロール位置を取得する方法は簡単です。htmlのscriptタグ内に以下のjQueryを記述します。

$(document).ready(function(){
var top = $(window).scrollTop();
console.log(top);
});

documentやwindowはセレクタ、readyやscrollTopはメソッドと言います。$(document).ready(function(){～});はドキュメントが読み込まれたらreadyの指定したfunctionの処理を行うという意味です。その中ではwindowでブラウザ画面を取得し、scrollTopメソッドで値を取得しています。

取得した値はconsole.logでログ出力しています。ログ出力を見るには、Google Chromeの場合は該当する画面でF12キーを押して、DevToolsのConsoleタブを選択することで見られます。

より分かりやすいサンプル

htmlが空のような状態で上のサンプルを実行すると、ログには0と出力されます。一番上にスクールされている状態なので0なのですが、これではscrollTopの機能がよくわかりません。そこでhtmlを以下のように記述します。

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<button>button</button>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

そしてjQueryは以下のようにしてください。

$(document).ready(function(){
$(‘button’).click(function(){
var top = $(window).scrollTop();
console.log(top);
});
});

スクロール位置の取得や設定が可能

今度のサンプルはブラウザの中央付近にボタンが表示されます。改行を沢山記述したので縦のスクロールバーを上下できます。スクロールバーを動かしてボタンを押すとclickメソッドによりスクロール位置取得の処理が呼ばれ、ログには現在のスクロール位置が表示されます。前よりscrollTopの機能がわかりやすくなりました。

次はjQueryを以下のように記述してください。

$(document).ready(function(){
$(‘button’).click(function(){
$(window).scrollTop(200);
});
});

このサンプルを実行して、スクロールバーを移動してからボタンをクリックしてみましょう。ボタンがクリックされると縦スクロール位置が200にセットされます。

offset().topの機能は？

jQueryにはscrollTopに似たメソッドとしてoffset().topがあります。jQueryの記述を以下のようにしてください。

$(document).ready(function(){
$(‘button’).click(function(){
var top = $(‘button’).offset().top;
console.log(top);
});
});

実行してボタンをクリックすると、環境にもよりますがログに488などと表示されたりします。これはボタンの縦位置を表しています。offset().topはhtml部品の縦位置を取得できるということです。

scrollTopのアニメーション

次はスクロールでアニメーションをしてみましょう。jQueryを以下のように変更して実行してみてください。

$(document).ready(function(){
$(‘html’).animate({scrollTop:200});
});

スクロールバーがすっと動いて縦200の位置になりました。jQueryならアニメーションがこんなに簡単にできてしまうのです。なおアニメーションの場合はセレクタはwindowではなくhtmlを指定します。

offset().topを応用する

ここまでの応用で、指定したhtml部品の所にスクロールバーを移動させることもできます。

$(document).ready(function(){
$(‘button’).click(function(){
var top = $(‘button’).offset().top;
$(‘html’).animate({scrollTop:top});
});
});

実行してボタンをクリックすると、ボタンがブラウザの左上の位置になります。

jQueryを使わない場合

実はjQueryを使わなくてもJavaScriptだけでスクロール位置は取得できます。

$(document).ready(function(){
$(‘button’).click(function(){
var top = window.pageYOffset;
console.log(top);
});
});

このようにwindow.pageYOffsetでもスクロール位置は取得できます。指定したスクロール位置に移動するにはscrollToを利用します。

$(document).ready(function(){
$(‘button’).click(function(){
window.scrollTo(0,200);
});
});

JavaScriptとjQueryのどちらを使ってもかまいませんが、jQueryで統一したいならscrollTopを使うべきでしょう。スクロール位置取得も移動も1つのメソッドでできるメリットもあります。

システム
エンジニア

位置を取得したり移動や変更もできる便利なメソッドなんですね。

プロジェクト
マネージャー

このメソッドとアニメーションを駆使して見栄えのするWebページをぜひ作成してみてください。

jQueryのscrollTopは手軽に使えるメソッド

jQueryのscrollTopについて解説しましたが、ご理解頂けましたでしょうか。スクロール位置を簡単に取得・設定できるscrollTopやアニメーションを使いこなして、驚くようなWebページを是非開発してください。