Configurar una posición de la barra de desplazamiento

Question

Tengo una tabla dentro de un div (es desbordamiento, por lo que el navegador representa una barra de desplazamiento). Usando JavaScript, ¿cómo muevo la manija de la barra de desplazamiento a lo largo de la pista a una posición que corresponde a la ubicación de una fila en la tabla?

+--------------------------------------+ 
|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

Si quieres ir a la no jQuery way, utilice la tabla que contiene de scrollTop property.

Supongamos que puede identificar fácilmente la fila a la que desea desplazarse utilizando una ID, junto con la que contiene <div />. Use el offsetTop del elemento al que desea desplazarse.

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

container.scrollTop = rowToScrollTo.offsetTop; 

Answer 2

También puede utilizar el método .scrollTop() jQuery:

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

Answer 3

Puede utilizar esta:

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

Además, se puede comprobar esta example on jsfiddle.

Answer 4

usando jQuery:

'.scroll-mesa' es el nombre de la clase utilizada para scroll capaces parte

1.En primer lugar ir a la posición inicial

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

2 La línea de abajo calcula la diferencia de desplazamiento entre la posición superior de la tabla y la fila a la que tenemos desplazamiento

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

Answer 5

Si usted está interesado en jQuery aquí, puede hacerlo de la siguiente manera:

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