設置一個滾動條的位置

Question

我有一個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        | | 
+--------------------------------------+ 

Answer 1

如果你想去非jQuery way，使用含表的scrollTop property。

讓我們假設您可以使用ID以及包含<div />的標識，輕鬆識別要滾動到的行。使用要滾動到的元素的offsetTop。

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

container.scrollTop = rowToScrollTo.offsetTop; 

Answer 2

您還可以使用jQuery的.scrollTop()方法：

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

Answer 3

您可以使用此：

$('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); 
}); 

此外，您可以檢查此example on jsfiddle。

Answer 4

使用jQuery：

'.scroll表' 是用於類的名字滾動能夠部分

1.首先去到初始位置

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

2 。下行計算表格頂部位置和我們滾動的行之間的滾動差異

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

Answer 5

如果您有興趣的jQuery在這裏，你可以如下做到這一點：

$(".tableClass tbody").scrollTop(0);