How to scroll an item inside a scrollable div to the top

Question

I have a #contact-list-scroller div that scrolls in the page. Based on a contact_XXXX ID I'd like the #contact-list-scroller scroll position to bet set to make sure the contact_XXX item is at the top of the page.

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

Here's what I have so far:

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

But that is just scrolling to the top. Ideas? Thanks

Answer 1

I think you'll need position().top. Because the values returned by position() are relative to its parent (unlike offset()), it makes your code more flexible. If you change the position of your parent container your code won't break.

Example:

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

or animated:

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

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

Answer 2

Even I was having same situation and wanted to scroll element to top. Now, there is direct support for this behavior.

Just use <element>.scrollIntoView(true) JavaScript method.

---

Example:

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

---

More Info:

Although this is experimental now, soon will get support in every browser. You could find more info on this at : MDN

Answer 3

After trying all of the above with no success I found this at W3schools:

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