如何将可滚动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().top.因为position()返回的值是相对于其父级的(与offset()不同),所以它使您的代码更加灵活.如果更改父容器的位置,则代码不会中断.

例:

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

或动画:

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

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

Answer 2

即使我有相同的情况,并希望滚动元素到顶部.现在,直接支持这种行为.

只需使用<element>.scrollIntoView(true)JavaScript方法.

例:

document.getElementById("yourElementId").scrollIntoView(true);

更多信息:

虽然现在是实验性的,很快就会得到每个浏览器的支持.您可以在以下位置找到更多相关信息:MDN

Answer 3

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

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

js小提琴。