jquery - 如何将可滚动 div 内的项目滚动到顶部

Question

我有一个在页面中滚动的#contact-list-scroller div。根据 contact_XXXX ID，我希望设置 #contact-list-scroller 滚动位置，以确保 contact_XXX 项目位于页面顶部。

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

这是我到目前为止所拥有的:

$('#contact-list-scroller').scrollTop($('#contact_' + id).scrollTop());

但这只是滚动到顶部。有想法吗？谢谢

Answer 1

我想你需要position() 。顶部。因为position()返回的值是相对于其父级的(与offset()不同)，所以它使您的代码更加灵活。如果更改父容器的位置，您的代码不会中断。

示例:

var contactTopPosition = $("#contact_8967").position().top;
$("#contact-list-scroller").scrollTop(contactTopPosition);

或动画:

$("#contact-list-scroller").animate({scrollTop: contactTopPosition});

参见jsfiddle:http://jsfiddle.net/5zf9s/