Wie man ein Element innerhalb eines scrollbaren Divs nach oben scrollt

Question

Ich habe ein #contact-list-scroller DIV, das auf der Seite scrollt. Basierend auf einer contact_XXXX ID möchte ich, dass die Scrollposition des #contact-list-scroller so eingestellt wird, dass sich der contact_XXX-Eintrag oben auf der Seite befindet.

   stuff
   stuff
   stuff
   stuff
   stuff
   .....

Hier ist, was ich bisher habe:

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

Aber das scrollt nur nach oben. Ideen? Danke

Answer 1

Ich denke, du wirst position() benötigen. Weil die Werte, die von position() zurückgegeben werden, relativ zu ihrem Elternelement sind (im Gegensatz zu offset()), macht es deinen Code flexibler. Wenn du die Position deines Elternelements änderst, wird dein Code nicht kaputt gehen.

Beispiel:

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

oder animiert:

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

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

Answer 2

Auch ich hatte dieselbe Situation und wollte das Element nach oben scrollen. Jetzt gibt es direkte Unterstützung für dieses Verhalten.

Verwenden Sie einfach die .scrollIntoView(true) JavaScript Methode.

---

Beispiel:

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

---

Weitere Informationen:

Obwohl dies derzeit experimentell ist, wird es bald in jedem Browser unterstützt. Weitere Informationen dazu finden Sie unter: MDN

Answer 3

Nachdem ich alle oben genannten Optionen ohne Erfolg ausprobiert hatte, fand ich dies bei W3schools:

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

Answer 4

var scrollTop = $('#contact_' + id).offset().top;

$('#contact-list-scroller').attr('scrollTop', scrollTop);

jsFiddle.

Answer 5

Schauen Sie sich das jQuery-ScrollTo-Plugin an - damit können Sie zu einem bestimmten DOM-Element scrollen http://flesler.blogspot.com/2007/10/jqueryscrollto.html