如何找到相对于它的父元素的元素位置以将其滚动显示

Question

我有一个包含很多元素的div，overflow: scroll。然后我希望能够在视图中滚动第n个元素。我设置了一个小提琴，但我找不到表达式来获取相对于父元素的元素位置。

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

我尝试了el.position().top和el.offset().top，但它们无效。

注意：h / 2因此元素位于div的中间。

Answer 1

好了...只需要将当前的scrollTop（）添加到它。

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});

Answer 2

对于一个更稳定的解决方案，无论offsetParent（可以随position属性的值改变）都可以工作，我会使用offset（）而不是position（）：

cont.animate({scrollTop: cont.scrollTop() + (el.offset().top - cont.offset().top)});