scrollTopとscrollTop() 似ているけれども違うものです。
それぞれの使い方をしっかりとマスターしましょう。
scrollTop()について
scrollTop()はメソッドです。
scrollTop()は、引数を指定した場合としない場合で働きが変わります。
引数を指定しない場合はjQueryオブジェクトで指定した要素のスクロール値を取得します。
引数を指定した場合はjQueryオブジェクトで指定した要素を引数の数値の位置までスクロールします。
ある要素がどれだけスクロールしたか知りたい場合にscrollTop()を使用し、ある要素をある特定の数値ｘだけスクロールさせたい場合は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サンプル
