Javascript: прокрутите до n-й строки в таблице?

Используя либо чистый Javascript, либо jQuery, как мне прокручивать страницу так, чтобы n-я строка в таблице была сосредоточена на странице?

Некоторые примеры, которые я видел, которые имеют такую функцию, обычно требуют, чтобы элемент, который я просматривал, использовал идентификатор в качестве селектора, но поскольку таблица имеет динамическое количество строк и может быть выгружена, я бы предпочел не пройдите этот маршрут, чтобы дать каждому тегу <td> идентификатор.

Самый простой способ просто рассчитать положение td относительно верхней части документа и прокрутить окно с помощью setInterval до тех пор, пока середина окна не будет >= позиция nth <td> тега?

Я предполагаю, что какой-нибудь псевдокод, как мне кажется, работает:

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

Ответы

Ответ 1

Последнее обновление (no-jquery для современных браузеров)

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/

Ответ 2

Не используйте jQuery - он замедляет работу сайтов!

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

Ответ 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);
}

Ответ 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);
    };
});

Ответ 5

он же-г-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);
    }
});

Это поможет вам прокрутить точную позицию.