web-dev-qa-db-ja.com

スクロールバーの位置を設定する

Div内にテーブルがあります（オーバーフローしているため、ブラウザはスクロールバーをレンダリングします）。 JavaScriptを使用して、スクロールバーハンドルをトラックに沿ってテーブル内の行の位置に対応する位置に移動するにはどうすればよいですか？

+--------------------------------------+
|100                               |   |
|101                               |   |
|102                               |   |
|103                               |   |
|104                               |   |
|105     This is a table that      |---|
|106        has overflowed.        | - |  <-- I want to move this using JavaScript,
|107                               |---|      so that a specific row # is visible.
|108                               |   |
|109                               |   |
|110                               |   |
|111                               |   |
+--------------------------------------+
javascriptscrollbar
35
Scrollbar

Non - jQuery way にしたい場合は、それを含むテーブルの scrollTop property を使用します。

含む<div />とともに、IDを使用してスクロールする行を簡単に識別できると仮定します。スクロールする要素の offsetTop を使用します。

var container = document.getElementById('myContainingDiv');
var rowToScrollTo = document.getElementById('myRow');

container.scrollTop = rowToScrollTo.offsetTop;
50
Dan Herbert

Jqueryを使用：

「.scroll-table」は、スクロール可能な部分に使用されるクラス名です

1.最初に初期位置に行く

$('.scroll-table').scrollTop(0);

2.以下の行は、テーブルのトップ位置とスクロールする行のスクロールの差を計算します

$('.scroll-table').scrollTop($('#myrowid').position().top-$('.scroll-table').position().top);
1
Aravind T

これを使用できます：

$('a').on('click', function(e){
  var t = this.id.substring(1);
  e.preventDefault();
  var target= $(".section")[t] ;
  var offset = $( target ).offset();
  $('html, body').stop().animate({
    scrollTop: offset.top
  }, 1000);
});

また、これを確認できます jsfiddleの例 .

1
Hessam Nadr

ここでjQueryに興味がある場合は、次のように実行できます。

$(".tableClass tbody").scrollTop(0);
1
Nuno Ribeiro

.scrollTop() jQueryメソッドも使用できます。

https://api.jquery.com/scrollTop/

0
Santiago Rebella

AngularJsを使用したソリューションがあります。

  $document.scrollTopAnimated(50, 1000).then(function () {});

最初のパラメーターは位置です。 2番目は、アニメーションの継続時間です。

0
Gustavo Lage