Javascript：滚动到表中的第 n 行？

Question

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

我见过的一些具有此类功能的示例通常要求我滚动到的元素使用 id 作为选择器，但由于表具有动态数量的行并且可能会分页，所以我宁愿不走这条路必须为每个 标签提供一个 id。

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

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

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

Answer 1

最新更新（现代浏览器的 no-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/

Answer 2

不要使用 jQuery - 它会减慢网站速度！

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

Answer 3

你可以做这样的事情

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

Answer 4

试一试：

/*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);
    };
});

Answer 5

aka-g-petrioli

我已更正您的回答中的以下内容。

 $('#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);
    }
});

这将帮助您滚动准确的位置。