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);
Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)
- 作者: 高津戸壮
- 出版社/メーカー: 技術評論社
- 発売日: 2011/12/07
- メディア: 大型本
- 購入: 4人 クリック: 62回
- この商品を含むブログを見る
- 作者: 株式会社シフトブレイン
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2013/11/27
- メディア: 大型本
- この商品を含むブログ (2件) を見る