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

Question

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

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

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

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