スクロール可能なdivの内部のコンテンツにジャンプします

Question

次のHTMLを手に入れました：

<div style="height:200px;overflow-y:scroll;">
  <table>.....</table>
</div>

このセットアップにより、私は拡張されたものをいくらか模倣しています <select> @size属性を使用した制御が定義されています。したがって、ユーザーがテーブル内の行を選択できるように。テーブルを「ジャンプアップ」する方法はありますか？選択した行がDIVの上部にあるように見えるようにし、垂直のスクロールバーがその位置にスクロールしました。実際のスクロール効果は必要ありません。テーブルは、列のクリックですぐに位置を変更する必要があります。

Answer 1

これはうまくいくかもしれません：

$("#scrollableDiv").animate({
  scrollTop: 200 // scrolls to the bottom
}, 1000);

Answer 2

Scrolltopを使用することをお勧めします（または、必要に応じてアニメーション化します）。

$('div')[0].scrollTop = 200 //would set the scrollable div to 200px down.

http://jsfiddle.net/8meph/

Answer 3

以下は、以下で使用されるコードの変更された抽出物です。http://www.balupton.com/sandbox/jquery-scrollto/demo/

あなたが望むことをするために：

            // Fetch the scrollable div
            $container = $('#scrollable');
            // Fetch the target div
            $target = $('#target');

            // Prepare the Inline Element of the Container
            var $inline = $('<span/>').css({
                'position': 'absolute',
                'top': '0px',
                'left': '0px'
            });
            var position = $container.css('position');

            // Insert the Inline Element of the Container
            $container.css('position','relative');
            $inline.appendTo($container);

            // Determine the Offsets
            var startOffset = $inline.offset().top,
                targetOffset = $target.offset().top,
                offsetDifference = targetOffset - startOffset;

            // Perform the jump
            $container.css('scrollTop',offsetDifference+'px')

ここにインラインを追加して、スクロール可能な領域内で正しい開始位置を取得するようにします。オフセットの違いを使用するので、他の場所にジャンプするのではなく、アニメーションITアニメーションを開始位置から実行したい場合。