Div de autoscroll con jQuery en la parte inferior después de agregar

Question

Tengo una clase div = 'mensajes'. Agrego a esta fecha div través jQuery.append() Aquí están los estilos:

.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; 
} 

Para el desplazamiento automático que utilizo esta función:

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); 
} 

Acerca de ~ 20 mensajes está desplazando normalmente, pero después de que se 'cuelga', los mensajes nuevos no se desplazan. Versión de Chrome 19.0.1084.56. ¿Qué estoy haciendo mal? Gracias!

Answer 1

Cambio

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

a

scrollTop: $("#messages").scrollHeight 

Answer 2

Esta solución no funcionó para mí, sin embargo, hizo la siguiente ...

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

Answer 3

Por favor, intente:

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