¿Cómo puedo desplazarme programáticamente por un div con sus propias barras de desplazamiento?

Question

Tengo una página HTML con un DIV interno utilizado para contenido. El DIV interno tiene sus propias barras de desplazamiento. Me gustaría desplazarme automáticamente a una posición determinada en el DIV.

¿Cómo puedo hacer esto? (Tenga en cuenta que NO quiero desplazamiento automático de las barras de desplazamiento de la ventana - que ya sé cómo hacer esto)

se necesita una solución multiplataforma

Answer 1

El div tiene una propiedad scrollTop que puede establecer (y su amigo , scrollLeft).

• jsFiddle Demo

• scrollTop on MDN

• scrollLeft on MDN

Answer 2

hay esta .scrollTo() método que puede ayudar a que se desplace por su divs. probarlo para obtener más información, visite here

Answer 3

Añadir un div (en la que desea desplazarse):

<div id="#scroll-here">Test..</div> 

y añadir un enlace como este:

<a href="#scroll-here">Scroll to Test</a> 

si quieres un desplazamiento suave que puede consultar this

Answer 4

Siempre que JavaScript sea aceptable, creé demo using jQuery que usa un elemento conocido con una ID dentro del div.

$(function() { 
    var testOffset = $('#test').offset(), 
     scrollOffset = $('#scroll').offset(); 
    $('#scroll').scrollTop(testOffset.top - scrollOffset.top); 
});​ 

Si sólo conoce hasta qué punto, en términos de píxeles, en lugar de a un elemento específico, podría ser adaptado para:

$(function() { 
    $('#scroll').scrollTop(100); 
});​ 

Answer 5

lo recomiendo echar un vistazo a la scrollTo jQuery plugin. Es un complemento realmente útil que te permite animar un desplazamiento dentro de cualquier elemento. He configurado un pequeño ejemplo en jsFiddle que demuestra cómo funciona. El ejemplo muestra cómo "desplazarse a" el tercer p en el primer div, y luego el segundo p en el segundo div. Una cosa que vale la pena señalar es que para garantizar que el position().top sea correcto, deberá configurar el que contiene div para tener un position: relative;. Sin embargo, afortunadamente esto no es un gran problema. :)