Impostazione di una posizione barra di scorrimento

Question

Ho una tabella all'interno di un div (è overflow, quindi il browser esegue il rendering di una barra di scorrimento). Usando JavaScript, come posso spostare l'handle della barra di scorrimento lungo la traccia in una posizione che corrisponde alla posizione di una riga nella tabella?

+--------------------------------------+ 
|100        | | 
|101        | | 
|102        | | 
|103        | | 
|104        | | 
|105  This is a table that  |---| 
|106  has overflowed.  | - | <-- I want to move this using JavaScript, 
|107        |---|  so that a specific row # is visible. 
|108        | | 
|109        | | 
|110        | | 
|111        | | 
+--------------------------------------+ 

Answer 1

Se si vuole andare la non jQuery way, utilizzare la tabella contenente del scrollTop property.

Supponiamo che sia possibile identificare facilmente la riga che si desidera scorrere utilizzando un ID, insieme al numero <div />. Utilizzare lo offsetTop dell'elemento a cui si desidera scorrere.

var container = document.getElementById('myContainingDiv'); 
var rowToScrollTo = document.getElementById('myRow'); 

container.scrollTop = rowToScrollTo.offsetTop; 

Answer 2

È inoltre possibile utilizzare il metodo .scrollTop() jQuery:

https://api.jquery.com/scrollTop/

Answer 3

È possibile utilizzare questo:

$('a').on('click', function(e){ 
    var t = this.id.substring(1); 
    e.preventDefault(); 
    var target= $(".section")[t] ; 
    var offset = $(target).offset(); 
    $('html, body').stop().animate({ 
    scrollTop: offset.top 
    }, 1000); 
}); 

Inoltre, è possibile controllare questo example on jsfiddle.

Answer 4

utilizzando jQuery:

'.scroll-table' è il nome della classe utilizzata per scorrimento-in grado parte

1.First andare alla posizione iniziale

$('.scroll-table').scrollTop(0); 

2 .Linea in basso calcola la differenza di scorrimento tra i tavoli in alto e la riga a cui abbiamo scroll

$('.scroll-table').scrollTop($('#myrowid').position().top-$('.scroll-table').position().top); 

Answer 5

Se siete interessati a jQuery qui, si può fare come segue:

$(".tableClass tbody").scrollTop(0);