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