设置一个滚动条的位置

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);