Javascript：滾動到表中的第n行？

Question

使用純Javascript或jQuery，我該如何滾動頁面，使表中的第n行居中在頁面上？

我見過的一些例子有這種功能，通常要求我滾動的元素使用一個id作爲選擇器，但由於表具有動態數量的行並且可以被分頁，我寧願不要走這條路線，必須給每個<td>標籤一個id。

是最簡單的方法來計算td相對於文檔頂部的位置，並使用setInterval滾動窗口，直到窗口的中間> =到第n個<td>標記的位置？

我想我想象它的工作將是這樣一些僞代碼：

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

Answer 1

既然你可以在這裏使用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

你可以做這樣的事情

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

給這一個鏡頭：

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

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

這將幫助您滾動準確的位置。

Answer 5

不要使用jQuery - 它會減慢網站速度！

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