スクロール可能なdivの内部のコンテンツにジャンプします
-
03-10-2019 - |
質問
次のHTMLを手に入れました:
<div style="height:200px;overflow-y:scroll;">
<table>.....</table>
</div>
このセットアップにより、私は拡張されたものをいくらか模倣しています <select>
@size属性を使用した制御が定義されています。したがって、ユーザーがテーブル内の行を選択できるように。テーブルを「ジャンプアップ」する方法はありますか?選択した行がDIVの上部にあるように見えるようにし、垂直のスクロールバーがその位置にスクロールしました。実際のスクロール効果は必要ありません。テーブルは、列のクリックですぐに位置を変更する必要があります。
解決
これはうまくいくかもしれません:
$("#scrollableDiv").animate({
scrollTop: 200 // scrolls to the bottom
}, 1000);
他のヒント
Scrolltopを使用することをお勧めします(または、必要に応じてアニメーション化します)。
$('div')[0].scrollTop = 200 //would set the scrollable div to 200px down.
以下は、以下で使用されるコードの変更された抽出物です。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アニメーションを開始位置から実行したい場合。
所属していません StackOverflow