How to find the element position relative to it's parent to scroll it visible

jquery position scrolltop
ariel picture ariel · Apr 12, 2014 · Viewed 8.5k times · Source

I have a div with lots of elements inside it, and overflow: scroll. Then i want to be able to scroll the nth element in view. I set a fiddle to it, but I can't find the expression to get the element position relative to the parent.

http://jsfiddle.net/bortao/NXcTK/

I tried both el.position().top and el.offset().top but they don't work.

Note: h / 2 is so the element is positioned in the middle of the div.

Answer

ariel picture ariel · Apr 12, 2014

Ok got it... just had to add the current scrollTop() to it.

http://jsfiddle.net/bortao/NXcTK/1/

var cont = $("#container");
var el = $(cont[0].children[index]);
var h = cont.height() / 2;
var elementTop = el.position().top;
var pos = cont.scrollTop() + elementTop - h;
cont.animate({scrollTop: pos});

Related questions

Slide right to left?

How can I have a div go from collapsed to expanded (and vice versa), but do so from right to left? Most everything I see out there is always left to right.

Read More
How to get mouse position in jQuery without mouse-events?

I would like to get current mouse position but I don't want to use: $(document).bind('mousemove',function(e){ $("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY); }); because I just need to get the position and process the …

Read More
jQuery UI dialog box not positioned center screen

I have a jQuery dialog box that is meant to position in the middle of the screen. However, it seems slightly off-center vertically. Here is the code: $('#add_box').dialog({ autoOpen: true, width: 300, modal: true, resizable: false, bgiframe:true }); …

Read More