I have following div structure.

<div id="conversation" class="list-view">
   <div class="conv">
       <div class="msg">Hi 1</div>
       <div class="msg">Hi 2</div>
       <div class="msg">Hi 3</div>
       <div class="msg">Hi 4</div>
       <div class="msg">Hi 5</div>
       <div class="msg">Hi 6</div>
       <div class="msg">Hi 7</div>
       <div class="msg">Hi 8</div>
       <div class="msg">Hi 9</div>
       <div class="msg">Hi 10</div>
   </div>
</div>

Now when i add on ajax submit button new div <div class="msg">Hi 11</div> added at the end of <div class="conv">. i want to scroll down to the bottom new added div.

i have used following but it doesn't work.

$('.conv ').animate({scrollTop: $('.conv')[0].scrollHeight}, 'slow');
$('.conv').scrollTop($('.conv')[0].scrollHeight);

How to scroll down to bottom child div. Position of parent div is fixed.

I have following div structure.

<div id="conversation" class="list-view">
   <div class="conv">
       <div class="msg">Hi 1</div>
       <div class="msg">Hi 2</div>
       <div class="msg">Hi 3</div>
       <div class="msg">Hi 4</div>
       <div class="msg">Hi 5</div>
       <div class="msg">Hi 6</div>
       <div class="msg">Hi 7</div>
       <div class="msg">Hi 8</div>
       <div class="msg">Hi 9</div>
       <div class="msg">Hi 10</div>
   </div>
</div>

Now when i add on ajax submit button new div <div class="msg">Hi 11</div> added at the end of <div class="conv">. i want to scroll down to the bottom new added div.

i have used following but it doesn't work.

$('.conv ').animate({scrollTop: $('.conv')[0].scrollHeight}, 'slow');
$('.conv').scrollTop($('.conv')[0].scrollHeight);

How to scroll down to bottom child div. Position of parent div is fixed.

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 18, 2020 at 12:42 Jaydeep Mor 1,71333 gold badges2222 silver badges4242 bronze badges asked Jul 15, 2015 at 10:38 DharaDhara 1,50155 gold badges3030 silver badges4848 bronze badges 4

• you need to add the css for the conv div – Pete Commented Jul 15, 2015 at 10:44
• possible duplicate of Scroll to bottom of div? – C3roe Commented Jul 15, 2015 at 10:47
• @Jazz, I meant add your current css for the conv div to the question. I was wanting to see if you had set a height on it – Pete Commented Jul 15, 2015 at 11:02
• yes i have added .conv{ max-height:401px; overflow:auto; } . – Dhara Commented Jul 15, 2015 at 11:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You will need to fix the height of .conv if you want to scroll that. Else, use scroll on the body.

Demo: http://jsfiddle/GCu2D/775/

JS:

$(document).ready(function () {
    $('.conv ').animate({
        scrollTop: $('.conv .msg:last-child').position().top
    }, 'slow');
});

CSS:

.conv {
    max-height:100px; //for demo
    overflow:auto;
}

You can use the following code as:

$('.conv').animate({scrollTop: $('.conv div.msg:last').offset().top});

For the demo : http://jsfiddle/GCu2D/776/