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

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:

$('#cont开发者_StackOverflowact-list-scroller').scrollTop($('#contact_' + id).scrollTop());

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

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/

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

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

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

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

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

jsFiddle.

Take a look at the jquery scrollTo plugin - you can use it to scroll to a specific DOM element http://flesler.blogspot.com/2007/10/jqueryscrollto.html