Javascript: Przewiń do n-tego wiersza w tabeli?

Question

Korzystając z czystego kodu JavaScript lub jQuery, jak przewinąć stronę tak, aby n-ty wiersz tabeli był wyśrodkowany na stronie?

Niektóre przykłady, które widziałem, które mają tego rodzaju funkcję, zwykle wymagają, aby element, który przewijam, używał identyfikatora jako selektora, ale ponieważ tabela zawiera dynamiczną liczbę wierszy i może być stronicowana, wolałabym nie idź tą drogą, aby nadać każdemu identyfikatorowi <td> znacznik.

Czy to najprostszy sposób, aby obliczyć położenie td względem górnej części dokumentu i przewijać okno za pomocą setInterval, dopóki środek okna nie znajdzie się> = do pozycji n-tego tagu <td>?

przypuszczam jakieś pseudo-kod sposób sobie wyobrazić, że praca będzie:

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

Answer 1

Ponieważ można użyć jQuery tutaj jest ..

var w = $(window); 
var row = $('#tableid').find('tr').eq(line); 

if (row.length){ 
    w.scrollTop(row.offset().top - (w.height()/2)); 
} 

Demo na http://jsfiddle.net/SZKJh/

---

Jeśli chcesz go animować zamiast po prostu się nie używać

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 na http://jsfiddle.net/SZKJh/1/

Answer 2

można zrobić coś takiego

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 3

Daj ten strzał:

/*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 4

aka-g-petrioli

Poprawiłem następujące odpowiedzi z twojej odpowiedzi.

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

Pomoże to przewinąć dokładną pozycję.

Answer 5

Nie używaj jQuery - spowalnia działanie witryn!

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