如何将可滚动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/

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

jsFiddle

Answer 4

看看jquery scrollTo插件 - 您可以使用它来滚动到特定的DOM元素 http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Answer 5

尝试上述所有方法均未成功后，我在W3schools上发现了这一点：

var elmnt = document.getElementById("Top");
elmnt.scrollIntoView();