kade

技術系の記事を書いていきます。

jQuery: ページ内をスクロールする

下記のようなindex.htmlがあるとき

<div id="elem0" style='position:absolute;top:0;left:0;'>0です</div>
<div id="elem1" style='position:absolute;top:1000;left:1000;'>1です</div>
<div id="elem2" style='position:absolute;top:2000;left:2000;'>2です</div>

下記のようにすると画面内を瞬時に任意の位置に移動させられます。

var position = $("#elem1").position();
$('body').scrollTop(position.top);
$('body').scrollLeft(position.left);

また下記のようにanimateと絡ませるとゆっくりと移動させることも可能です。

var position = $("#elem1").position();
$('body').animate({
  scrollTop: position.top,
  scrollLeft: position.left
}, 1000);

jQuery最高の教科書

jQuery最高の教科書