添加后,使用jQuery自动滚动div到底部

时间:2012-06-22 09:36:57

标签: javascript jquery css scroll scrolltop

我有一个div class ='messages'。我通过jQuery.append()向这个div添加日期 以下是样式:

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

对于autoscroll我使用这样的功能:

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

大约有20条消息正常滚动,但在“挂起”之后,新消息不会滚动。 Chrome版本19.0.1084.56。我做错了什么? 谢谢!

3 个答案:

答案 0 :(得分:8)

更改

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

scrollTop: $("#messages").scrollHeight

答案 1 :(得分:3)

这个解决方案对我不起作用,但是,以下做了......

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

答案 2 :(得分:0)

请尝试:

dynamic