Javascript: desplácese hasta la enésima fila en una tabla?

Question

Usando JavaScript puro o jQuery, ¿cómo desplazo la página para que la enésima fila de una tabla se centre en la página?

Algunos ejemplos que he visto que tienen este tipo de características generalmente requieren que el elemento al que me desplazo utilice una identificación como selector, pero como la tabla tiene una cantidad dinámica de filas y puede ser paginada, prefiero No vaya por esta ruta de tener que dar a cada etiqueta <td> una identificación.

¿Es la forma más sencilla de calcular la posición del td con respecto a la parte superior del documento y desplazar la ventana usando setInterval hasta que el medio de la ventana esté> = en la posición de la enésima etiqueta <td>?

supongo que algunos pseudo-código de la manera en que yo lo imagino trabajando sería:

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

Answer 1

Dado que puede usar jQuery aquí está ...

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

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

demo en http://jsfiddle.net/SZKJh/

---

Si usted quiere que animan en lugar de simplemente ir allí utilizar

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

Answer 2

Usted puede hacer algo como esto

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

Dar a este un tiro:

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

He corregido los siguientes de tu respuesta.

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

Esto le ayudará a desplazarse por una posición precisa.

Answer 5

No use jQuery - ¡ralentiza los sitios!

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