jQueryゼロから / scroll (指定位置にオートスクロールさせる)


jQueryではstyle属性をanimateでいじれます。
フェードイン・フェードアウトさせたいならopacity属性を0〜1でアニメーションとか。
ここでは、よくあるスクロールを指定します。

1
2
3
var target = $('html, body');
target.animate({ scrollTop: ***, 'slow' });
// *** にスクロールする座標を指定します

追記: 2011/01/31
if (jQuery.support.checkOn) {
  var target = $(‘html’);
} else {
  var target = $(‘body’);
}
という書き方を
var target = $(‘html, body’)
に変更しました。

指定のタグの位置に移動するなどの場合は動的に座標取得したりします。

1
target.animate({ scrollTop: $('#id').offset().top }, 'slow');

サンプル
追記: 2010/11/21 Safari, Chromeでも動作するように $(‘html’) と $(‘body’) の判定入れました
追記: 2011/01/01/31 判定入れなくても$(‘html, body’)って書き方でいけるみたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です