22

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

AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012

5 Answers5

30

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/

Richard
  • 1,289
  • 12
  • 25
  • Strange that makes sense but isn't working in my app. Perhaps it's because I'm using absolute positioning... – AnApprentice May 01 '11 at 17:14
  • 3
    Perhaps because it is nt taking into account the current scroll position? – AnApprentice May 01 '11 at 17:16
  • Also if it's a really long list, that ends up return a contactTopPosition of -2311 etc.. – AnApprentice May 01 '11 at 17:21
  • My demo is using the same css as you posted in the comments below. Are the child divs of contact-list-scroller styled in some way? Maybe a live demo I can look at? – Richard May 01 '11 at 17:44
  • 1
    It works initially but for some reason it doesn't work consistently and repeatedly... I added some buttons in another version of the same demo: http://jsfiddle.net/5zf9s/88/ – msanjay Mar 01 '14 at 11:24
20

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

Kedar.Aitawdekar
  • 2,364
  • 1
  • 23
  • 25
  • 1
    I see that this answer is more than a year old, but I tried this solution today on Chrome and it works. FYI – TheCuBeMan Jan 07 '16 at 16:18
  • scrollIntoView did not work for me. I have a div that is shown when hovering over a nav item, in that div I have 2 divs. One is just a list, the other is another div that is scrollable and has content hidden. When they mouse over an item on the left, I want the div on the right to scroll to the section about that hovered over item. scrollIntoView scrolls that div correctly, but also scrolls the whole page body down to the top of that div. – Nick DuBois Jan 30 '18 at 19:02
  • Old post, but since this was the second Google search result, I thought I would contribute. Yes, this works perfectly... if you are using Jquery, simply do $(selector)[0].scrollInfoView(true) – Vinnie Amir Feb 28 '22 at 05:29
2

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

var elmnt = document.getElementById("Top");
elmnt.scrollIntoView();
Stephen Rauch
  • 47,830
  • 31
  • 106
  • 135
ivan
  • 29
  • 1
0
var scrollTop = $('#contact_' + id).offset().top;

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

jsFiddle.

alex
  • 479,566
  • 201
  • 878
  • 984
  • Thanks but that doesn't seem to be working. Does it batter if #contact-list-scroller has the following CSS: position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; – AnApprentice May 01 '11 at 05:16
  • You may consider using `position()` instead of `offset()`. The 1st being relative to the parent, the latter relative to the document. – Sebastien Jan 25 '17 at 16:21
0

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

akhaku
  • 1,107
  • 7
  • 16