scrollTopとscrollTop()の使い方〜jQuery

jQuery

scrollTopとscrollTop() 似ているけれども違うものです。
それぞれの使い方をしっかりとマスターしましょう。

スポンサーリンク

scrollTop()について

scrollTop()はメソッドです。
scrollTop()は、引数を指定した場合としない場合で働きが変わります。
引数を指定しない場合はjQueryオブジェクトで指定した要素のスクロール値を取得します。
引数を指定した場合はjQueryオブジェクトで指定した要素を引数の数値の位置までスクロールします。

ある要素がどれだけスクロールしたか知りたい場合にscrollTop()を使用し、ある要素をある特定の数値xだけスクロールさせたい場合はscrollTop(x)とします。
scrollTop()サンプル

scrollTopについて

これはメソッドではありません。jQueryが用意したCSS用のプロパティです。
用途は animate() で使用します。
animate() はcssプロパティと値を設定してアニメーションの動きをつけるものです。
animate() でアニメーションの動きをつけることができる属性はwidthなど数値で設定できるものだけです。
具体的にはwidth,height,top,left,margin-left,opacityなど数値で指定できるものです。
そしてスクロールにも対応させるためにscrollTopとscrollLeftが用意されています。

animate()の使い方
$(セレクタ).animate({一部のCSSプロパティ: "値"}, アニメーションの時間, "イージング", コールバック);

scrollTop()は、引数を指定した場合にその位置まで瞬間で動きますが、.animate({ scrollTop: 0 }, 500, ‘swing ‘)などとするとアニメーションして移動します。
scrollTopサンプル

タイトルとURLをコピーしました