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

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

動作結果

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

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

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

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

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

OPERAでの注意点

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

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

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