Autoscroll div with jQuery to the bottom after appending

javascript jquery css scroll scrolltop
f1nn picture f1nn · Jun 22, 2012 · Viewed 25.4k times · Source

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!

Answer

Raab picture Raab · Jun 22, 2012

Change 

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

to

scrollTop: $("#messages").scrollHeight

Related questions

Prevent BODY from scrolling when a modal is opened

I want my body to stop scrolling when using the mousewheel while the Modal (from http://twitter.github.com/bootstrap) on my website is opened. I've tried to call the piece of javascript below when the modal is opened but …

Read More
How can I make a div stick to the top of the screen once it's been scrolled to?

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page.

Read More
Keep overflow div scrolled to bottom unless user scrolls up

I have a div that is only 300 pixels big and I want it to when the page loads scroll to the bottom of the content. This div has content dynamically added to it and needs to stay scrolled all the …

Read More