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

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

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

jsFiddle。

Answer 2

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

Answer 3

我认为你需要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 4

即使我有同样的情况和想滚动元件到顶部。现在，这种行为得到了直接的支持。

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

---

例子：

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

---

更多信息：

虽然这是现在的实验，不久将获得在每个浏览器的支持。你可以在这里找到更多的信息：MDN