如何使用 jquery 向下滚动到 div 的特定子级

Question

如何向下滚动到 div 的第 n 个子级。考虑这段代码

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

Messages div 有 6 个子级。我想向下滚动到第三个或第四个孩子，有人点击“click_me”

注意：孩子是动态添加的。使用一些 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>

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.

Answer 2

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

插件主页和文档：< a href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html" rel="nofollow">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+")");

Answer 3

有一个 jQuery 插件： http://demos.flesler.com/jquery/scrollTo/