Javascript：滚动到表中的第 n 行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7852986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: Scroll to nth row in a table?
提问by Ivan
Using either pure Javascript or jQuery, how do I scroll the page so that the nth row in a table is centered on the page?
使用纯 Javascript 或 jQuery，如何滚动页面以使表中的第 n 行位于页面中央？
Some examples I've seen that have this sort of feature usually require that the element I scroll to uses an id as the selector, but since the table has a dynamic amount of rows and may be paged, I'd rather not go this route of having to give each <td>tag an id.
我见过的一些具有此类功能的示例通常要求我滚动到的元素使用 id 作为选择器，但是由于表具有动态的行数并且可能会被分页，因此我宁愿不走这条路必须给每个<td>标签一个 id。
Is the easiest way to just calculate the position of the td relative to the top of the document and scroll the window using setInterval until the middle of the window is >= to the position of the nth <td>tag?
最简单的方法是计算 td 相对于文档顶部的位置并使用 setInterval 滚动窗口直到窗口的中间 >= 到第 n 个<td>标签的位置？
I suppose some pseudo-code of the way I imagine it working would be:
我想一些我想象的工作方式的伪代码是：
function scrollToNthTD(i) {
var position = CalculatePositionOfTR(i);
var timer = setTimeout(function () {
ScrollDownALittle();
if( CenterOfVerticalWindowPosition > position)
clearInterval(timer);
}, 100);
}
回答by Gabriele Petrioli
Latest update(no-jquery for for modern browsers)
最新更新（现代浏览器没有 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'
});
Demo at http://jsfiddle.net/r753v2ky/
演示在http://jsfiddle.net/r753v2ky/
Since you can use jQuery here it is..
因为你可以在这里使用 jQuery，所以..
var w = $(window);
var row = $('#tableid').find('tr').eq( line );
if (row.length){
w.scrollTop( row.offset().top - (w.height()/2) );
}
Demo at http://jsfiddle.net/SZKJh/
If you want it to animate instead of just going there use
如果你想让它动画而不是仅仅去那里使用
var w = $(window);
var row = $('#tableid').find('tr').eq( line );
if (row.length){
$('html,body').animate({scrollTop: row.offset().top - (w.height()/2)}, 1000 );
}
Demo at http://jsfiddle.net/SZKJh/1/
回答by TomeeNS
Don't use jQuery - it slows down sites!
不要使用 jQuery - 它会减慢网站的速度！
var elem = document.getElementById("elem_id");
elem.scrollIntoView(true);
回答by Keith.Abramo
You can do something like this
你可以做这样的事情
function CalculatePositionOfTR(){
return $('tr:eq(' + i + ')').offset().top;
}
function ScrollDownALittle(position){
$('html, body').animate({
scrollTop: position
}, 2000);
}
function scrollToNthTD(i) {
var position = CalculatePositionOfTD(i);
var timer = setTimeout(function () {
ScrollDownALittle(position);
if( CenterOfVerticalWindowPosition > position)
clearInterval(timer);
}, 100);
}
回答by lksmth
Give this a shot:
试一试：
/*pseudo-code*/
$("td.class").bind("click", function() {
var y = $(this).position().top,
h = $(window).height();
if(y > h/2) {
$("body").animate({
scrollTop: y - h/2
}, 2000);
};
});
回答by Ganesa Vijayakumar
aka-g-petrioli
aka-g-petrioli
I have corrected the followings from your answer.
我已从您的回答中更正了以下内容。
$('#control button').click(function(){
var w = $(window);
var row = table.find('tr')
.removeClass('active')
.eq( +$('#line').val() )
.addClass('active');
if (row.length){
w.scrollTop( row.offset().top - row.offset().top/5);
}
});
This will help you to scroll accurate position.
这将帮助您滚动准确的位置。
