jQuery　ページ内スクローラーを調べた

ページスクローラーの仕組みを調べてみた。

動作結果

ページをスクロールさせるターゲット

ページをスクロールさせるにはどうしたらいいのか調べてみて最初は「document」かと思ってみたが動作せず。

そしたら「body」もしくは「html」要素自体をアニメーションのターゲットにすればよいらしい

$("body,html")

scrollTopのプロパティ値をアニメーションさせる

animateによるscrollTopプロパティの値を指定する。例えばトップに戻る場合は「0」を指定して対象となる要素に移動したい場合は「offset()」メソッドを使用して要素の位置（offsetを使用するとtop leftの位置を取得することができる）でtopの座標を取得する

//TOPに移動する場合はscrollTopを0に指定する
$("body,html").animate({ scrollTop: 0 },500 );

//目的の要素に移動したい場合はoffset()を使用して位置を取得する
var dist=$("#contents").offset();
$("body,html").animate({ scrollTop:dist.top},500 );

OPERAでの注意点

さきほど移動する要素として「body,html」の要素を指定したが、ブラウザや描画モードによって動かす対象が異なるようで、特にOperaでは両要素が有効になるためチラつくようです

jQueryでscrollToを使うときの注意点

上記のサイトを見ていただくと分かるが、ユーザーの使用しているブラウザや描画モードを判別しているようです。今回はスクロールさせるのが目的なので省略している