如何使用jQuery滚动到div的特定子元素

Question

如何滚动到一个 div 的第 n 个子元素。考虑以下代码。

 <span id="click_me">Click me to scroll down to nth child</span>

消息div有6个子元素。我希望能够在某人点击“click_me”时向下滚动到第3或第4个子元素。

注意：子元素是动态添加的。使用一些Ajax函数调用/珍宝推送通知。

<div class="messages" id="messages_212">
    <div class="message_container">
        <p><b>Sahil grover: </b>5</p> 
    <div>
    <div class="message_container">
        <p><b>Sahil grover: </b>4</p> 
    <div>
    <div class="message_container">
        <p><b>Sahil grover: </b>3</p> 
    <div>
    <div class="message_container">
        <p><b>Sahil grover: </b>2</p> 
    <div>
    <div class="message_container">
        <p><b>Sahil grover: </b>1</p> 
    <div>

    <div class="message_container">
        <p><b>Sahil grover: </b>0</p> 
    <div>
</div>

- Mohit Jain

Answer 1

我不使用 jQuery（或任何框架），但在纯 JavaScript 中很容易实现：

d = document.getElementById('messages_212');
d.scrollTop = d.children[2].offsetTop;
// children[2] for the third div, [3] for the fourth, etc.

- Niet the Dark Absol

Answer 2

使用http://plugins.jquery.com/project/ScrollTo

插件主页和文档请查看: http://flesler.blogspot.com/2007/10/jqueryscrollto.html

//scroll to nth child
var child = 3;
$.scrollTo($(".message_container")[child]);

或者

//scroll to nth child
var child = 3;
$.scrollTo("#messages_212:nth-child("+child+")");

- MattoTodd

---

我能不能用id代替class？？如果这样做，我会得到一个错误，即：targ未定义。[在此错误上中断] var val = targ[pos]; - Mohit Jain

是的，id 可以使用，我没有放它是因为你那里没有任何 id。请阅读文档，有许多选项可供选择。 - MattoTodd

你是想要滚动到message_212，还是message_212的第n个子元素？我修改了我的答案，假设是第n个子元素，因为这是你的问题所问。 - MattoTodd

Answer 3

有一个 jQuery 插件可以实现这个功能：http://demos.flesler.com/jquery/scrollTo/

- Goran Obradovic