Autoscroll div with jQuery to the bottom after appending

Question

I have a div class='messages'. I add date to this div via jQuery.append() Here are the styles:

.messages {
border: 1px solid #dddddd;
padding:10px;
height: 400px;
overflow-x:visible;
overflow-y: scroll;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom:10px;
font-size:14px;
}

For autoscroll I use such function:

receiveMessage = function (name, message, type) {
    //adding new message
    $("#messages").append('<strong>' + name + ": " + '</strong>' + message + '<br>');
    /autoscrolling to the bottom
    $("#messages").animate({
        scrollTop: $("#messages").height()
    }, 300);
}

About ~20 messages are scrolling normally, but after it 'hangs', new messages are not scrolled. Chrome Version 19.0.1084.56 . What I'm doing wrong? Thanks!

Could you provide the HTML or better yet create a Test case on [jsFiddle](http://jsfiddle.net)? — AbstractChaos, Jun 22 '12 at 09:45

score 8 · Accepted Answer · answered Jun 22 '12 at 09:52

8

Change

scrollTop: $("#messages").height()

to

scrollTop: $("#messages").scrollHeight

answered Jun 22 '12 at 09:52

Raab

34,778
4
50
65

12

actually, now( This worked: $('#messages').animate({"scrollTop": $('#messages')[0].scrollHeight}, "fast"); I've tried to answer my own question but it isn't shown – f1nn Jun 22 '12 at 18:36
@f1nn your solution does work. I tried out your 'accepted answer', but that doesn't seem to do the work. – metric-space Nov 23 '14 at 03:57

score 3 · Answer 2 · answered Jul 28 '17 at 22:53

3

This solution did not work for me, however, the following did...

$(document).ready(function(){
   $('#chat-scroll').animate({
   scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000); 
 });

answered Jul 28 '17 at 22:53

Jeffrey L. Roberts

2,844
5
34
69

score 2 · Answer 3 · edited Nov 24 '17 at 07:30

2

Please try:

$(document).ready(function(){
   $('#chat-scroll').animate({scrollTop: $('#chat-scroll')[0].scrollHeight}, 2000);
});

edited Nov 24 '17 at 07:30

Olivier Pons

15,363
26
117
213

answered Nov 24 '17 at 07:22

Chintan Patel

21
3

this is IMHO the simplest/best answer, for current versions of jQuery. works fine in a single line of code, thx – Pablo Contreras Oct 05 '20 at 20:44

Autoscroll div with jQuery to the bottom after appending

3 Answers3