Question

How to scroll down to a nth child of a div. Consider this code

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

Messages div has 6 childs. I want to scroll down to 3rd or 4th child which somebody click on “click_me”

Note: Childs are added dynamically. Using some ajax functions calls/juggernaut push notifications.

<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

use http://plugins.jquery.com/project/ScrollTo

plugin homepage and docs at: http://flesler.blogspot.com/2007/10/jqueryscrollto.html

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

or

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