使用纯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/上的演示