Javascript:滚动到表格中的第n行？

Question

使用纯Javascript或jQuery,如何滚动页面以使表中的第n行位于页面的中心？

我见过的一些具有这种功能的例子通常要求我滚动的元素使用id作为选择器,但由于表具有动态的行数并且可以被分页,所以我宁愿不去这条路线必须给每个<td>标签一个id.

是最简单的方法来计算td相对于文档顶部的位置,并使用setInterval滚动窗口,直到窗口的中间是> =到第n个<td>标记的位置？

我想一些我想象它的工作方式的伪代码是:

function scrollToNthTD(i) {
  var position = CalculatePositionOfTR(i);
  var timer = setTimeout(function () {
    ScrollDownALittle();
    if( CenterOfVerticalWindowPosition > position)
      clearInterval(timer);
  }, 100);
}

Answer 1

既然你可以在这里使用jQuery,它就是..

var rows = document.querySelectorAll('#tableid tr');

// line is zero-based
// line is the row number that you want to see into view after scroll    
rows[line].scrollIntoView({
    behavior: 'smooth',
    block: 'center'
});

演示http://jsfiddle.net/SZKJh/

如果你想要它的动画而不是去那里使用

var w = $(window);
var row = $('#tableid').find('tr').eq( line );

if (row.length){
    w.scrollTop( row.offset().top - (w.height()/2) );
}

演示http://jsfiddle.net/SZKJh/1/

Answer 2

不要使用jQuery - 它减慢了网站的速度!

var elem = document.getElementById("elem_id");  
elem.scrollIntoView(true);