जावास्क्रिप्ट: किसी तालिका में nth पंक्ति तक स्क्रॉल करें?

Question

या तो शुद्ध जावास्क्रिप्ट या jQuery का उपयोग करके, मैं पृष्ठ को कैसे स्क्रॉल करूं ताकि तालिका में nth पंक्ति पृष्ठ पर केंद्रित हो?

कुछ उदाहरण मैंने देखा है कि इस तरह की सुविधा के लिए आम तौर पर आवश्यक तत्व है कि मैं एक आईडी को चयनकर्ता के रूप में उपयोग करने के लिए स्क्रॉल करता हूं, लेकिन चूंकि तालिका में गतिशील मात्रा में पंक्तियां होती हैं और मुझे पेज किया जा सकता है, प्रत्येक <td> आईडी को टैग करने के इस मार्ग पर न जाएं।

दस्तावेज़ के शीर्ष से संबंधित टीडी की स्थिति की गणना करने का सबसे आसान तरीका है और विंडो के मध्य तक सेटइंटरवाल का उपयोग करके विंडो को स्क्रॉल करें> = nth <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

उर्फ-ग-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);