【jQuery】スクロール量はscrollTop()で取得、わかりにくいoffset().topとの違い

ノート

on 2020/05/22

二週連続でお送りしております。フロントエンドエンジニアのノートです。

jQueryのメソッド、「scrollTop()」というのは難しいですよね。。

なんとなくわかってくるとそこまで難しくないのですが、

いざ、はじめて触れてみると何か得体の知れない拒否感があります。

ウインドウの高さと、、

スクロール量が、、

x座標とy座標の、、

とか言われてもわかりません。

あと、似たメソッドに「offset().top」というものもあったりしますので余計にややこしいです。

ねえ、それよくわかりませんよ。と肩を叩いてあげたい気分になります。

なので、今回は「scrollTop()」メソッドについて分かりやすく解説してみようかなと思います。

「scrollTop()」とは

「scrollTop()」は画面をスクロールした時のスクロール量を取得することができます。

つまりこのメソッドで、「どのくらいスクロールされたか」というのがわかります。

jQueryのメソッド、「scrollTop()」というのは難しいですよね。。なんとなくわかってくるとそこまで難しくないのですが、いざ、はじめて触れてみると何か得体の知れない拒否感があります。ウインドウの高さと、、スクロール量が、、 x座標とy座標の、、とか言われてもわかりません。あと、似たメソッドに「offset().top」というものもあったりしますので余計にややこしいです。ねえ、それよくわかりませんよ。と肩を叩いてあげたい気分になります。なので、今回は「scrollTop()」メソ

https://develop.logical-studio.com/web/20200522-scroll-event/

株式会社ロジカルスタジオでは一緒に働く仲間を募集しています