jquery - one - Cómo desplazar un elemento dentro de un div desplazable hacia la parte superior

jquery insert next sibling

Question

Tengo un # contact-list-scroller div que se desplaza en la página. Basado en una ID de contact_XXXX me gustaría que la posición de desplazamiento # contact-list-scroller se establezca para apostar para asegurar que el elemento contact_XXX esté en la parte superior de la página.

<div id="contact-list-scroller">
<div id="contact_8965">stuff</div>
<div id="contact_8966">stuff</div>
<div id="contact_8967">stuff</div>
<div id="contact_8968">stuff</div>
<div id="contact_8969">stuff</div>
.....
</div>

Esto es lo que tengo hasta ahora:

$(''#contact-list-scroller'').scrollTop($(''#contact_'' + id).scrollTop());

Pero eso es solo desplazarse hacia la parte superior. Ideas? Gracias

Answer 1

Creo que necesitarás la position() . Debido a que los valores devueltos por position () son relativos a su padre (a diferencia de offset ()), hace que su código sea más flexible. Si cambia la posición de su contenedor principal, su código no se romperá.

Ejemplo:

var contactTopPosition = $("#contact_8967").position().top;
$("#contact-list-scroller").scrollTop(contactTopPosition);

o animado:

$("#contact-list-scroller").animate({scrollTop: contactTopPosition});

Ver jsfiddle: http://jsfiddle.net/5zf9s/

Answer 2

Después de probar todo lo anterior sin éxito, encontré esto en W3schools:

var elmnt = document.getElementById("Top");
elmnt.scrollIntoView();

Answer 3

Eche un vistazo al complemento jquery scrollTo: puede usarlo para desplazarse a un elemento DOM específico http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Answer 4

Incluso yo estaba teniendo la misma situación y quería desplazar el elemento hacia arriba. Ahora, hay apoyo directo para este comportamiento.

Simplemente use el método de JavaScript <element>.scrollIntoView(true) .

Ejemplo:

document.getElementById("yourElementId").scrollIntoView(true);

Más información:

Aunque esto es experimental ahora, pronto recibirá soporte en todos los navegadores. Puede encontrar más información sobre esto en: MDN

Answer 5

var scrollTop = $(''#contact_'' + id).offset().top;
$(''#contact-list-scroller'').attr(''scrollTop'', scrollTop);

jsFiddle .