Question

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

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

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

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

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

Answer 1

最新更新（ no-jquery for for modern browsers ）

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

// line is zero-based    
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

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

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

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

5 个答案: