使用纯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);
}

最佳答案

最新更新(对于现代浏览器不使用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/r753v2ky/上的演示

由于您可以在此处使用jQuery,所以它是..
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/上的演示

如果您想让它动起来而不是仅仅去那里,请使用
var w = $(window);
var row = $('#tableid').find('tr').eq( line );

if (row.length){
    $('html,body').animate({scrollTop: row.offset().top - (w.height()/2)}, 1000 );
}

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

09-10 05:31
查看更多