Scorrimento automatico con jQuery in fondo dopo l'aggiunta

Question

Ho una classe div = 'messaggi'. Aggiungo data per questo div via jQuery.append() Questi sono gli stili:

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

Per autoscroll io uso tale funzione:

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

Chi ~ 20 messaggi sta scorrendo normalmente, ma dopo che è 'blocca', i nuovi messaggi non vengono fatti scorrere. Chrome versione 19.0.1084.56. Cosa sto facendo di sbagliato? Grazie!

Answer 1

Change

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

a

scrollTop: $("#messages").scrollHeight 

Answer 2

Questa soluzione non ha funzionato per me, però, il seguente fatto ...

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

Answer 3

Prova:

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