如何滾動頂部到表中的特定行

Question

嘿，我已經建立了一個應用程序，它有一個圖形和一個表格。 使用HighCharts庫和表的圖是一個簡單的表。

現在我有幾個點在圖中可以說10分和表10倍中的樣品。

當我點擊一個點時，回調已被執行。回調使用和id突出顯示錶中的特定行，並使用scrollTop滾動到已突出顯示的特定行。

每一件事工作在小規模精細，是被點擊的點，我們scrollTop的，其已經凸顯了右排。

當我在大規模的數據工作時，可以說200個點和200個樣本，事情開始變得混亂。這一次正確的行是高亮顯示，但scrollTop操作缺少行，我看不到突出顯示行，除非我滾動一下。

這是很難證明一個小的jsfiddle這個例子中，我將解釋我做了什麼。 在以下代碼中，您可以看到執行的回調，使用樣本和點之間的公共ID忽略與高亮操作相關的前兩行。

從第四行開始，您可以看到我讀取了想要的樣本的索引。 然後將表保存爲目標，讀取表的第二個子項的高度（忽略表格的標題）。

然後我打電話動畫和scrollTop的至高度*指數，這意味着我計算從頂部開始的行的高度。 可以說高度爲43然後，

在第一行中的第一個採樣將具有0 * 43從頂部的距離，

在第一行中第二樣品將具有1×43從遠處頂部，

在第一行中第三樣品將具有2 * 43從頂部的距離，在第一行中

N個採樣將具有的距離（N-1）* 43從頂部依此類推。

$scope.highLightRow = function (id) { 
      $scope.$apply(function() { 
       $scope.selectedId = id; 
      }); 
      var index = $scope.$eval("(detailedData|filter:{id:'" + $scope.selectedId + "'})[0]").index; 
      var $target = $('#TableDetailedData'); 
      var height = $('#TableDetailedData tr:nth-child(2)').height(); 
      $target.animate({ 
       scrollTop: ((height || 43) * index) 
      }, 500); 
     }; 

該表是這樣看

<div id="TableDetailedData" class="row collapse in overflow"> 
      <table class="table table-bordered table-scrolled"> 
       <thead class="thead-scrolled"> 
        <tr> 
         <th class="font-blue-steel bold">Date</th> 
         <th class="font-blue-steel bold">Time</th> 
         <th class="font-blue-steel bold">Source</th> 
         <th class="font-blue-steel bold">Validity</th> 
         <th class="font-blue-steel bold">H2</th> 
         <th class="font-blue-steel bold">O2</th> 
         <th class="font-blue-steel bold">N2</th> 
         <th class="font-blue-steel bold">CH4</th> 
         <th class="font-blue-steel bold">CO</th> 
         <th class="font-blue-steel bold">C2H6</th> 
         <th class="font-blue-steel bold">C2H4</th> 
         <th class="font-blue-steel bold">C2H2</th> 
        </tr> 
       </thead> 
       <tbody id="tableBody"> 
        <tr id="{{::item.index}}" ng-repeat="item in detailedData" ng-init="item.index = $index" ng-class="{'bg-yellow-saffron': item.id == selectedId}"> 
         <td>{{::item.date}}</td> 
         <td>{{::item.time}}</td> 
         <td>{{::item.source}}</td> 
         <td>{{::item.validity}}</td> 
         <td>{{::item.H2}}</td> 
         <td>{{::item.O2}}</td> 
         <td>{{::item.N2}}</td> 
         <td>{{::item.CH4}}</td> 
         <td>{{::item.CO}}</td> 
         <td>{{::item.C2H6}}</td> 
         <td>{{::item.C2H4}}</td> 
         <td>{{::item.C2H2}}</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 

總之，我的問題是，如何scrollTop的一個特定的行中讓的表說使用scrollTop的jQuery的2000行？

Answer 1

你可能最好使用原生window.scroll這需要兩個參數window.scroll(x-direction, y-direction)。所以，滾動到一個特定的元素，window.scroll(element.offsetLeft, element.offsetTop)。