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);
}
11
html javascript jquery scroll

5 ответов

Так как вы можете использовать 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/

21

Не используйте jQuery-это замедляет сайты!

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

вы можете сделать что-то подобное

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

дайте этому выстрел:

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

ака-г-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);
    }
});

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

0