$("#container").scrollTop($("#container")[0].scrollHeight);一定要在追加元素的下面执行。也就是说追加元素完成后执行滚动到底部
!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>sdfdf</title>
<style type="text/css">
#container{
overflow-y:auto;
overflow-x:hidden;
height:150px;
border:1px solid red;
width:350px;
}
html,body{margin:0px;padding:0px;font-family: "微软雅黑";}
</style>
</head>
<body>
<div id="container">
<ul id="msgList" >
<li>111111111</li>
<li>2222222222</li>
<li>333333333</li>
<li>4444444444</li>
<li>5555555555</li>
<li>66666666666</li>
<li>77777777777</li>
</ul>
</div>
<div class="footer">
<textarea id='msgInput' rows="2" placeholder="输入点什么" class="msg-input"></textarea>
<input type="button" class="btn" id='btnSubmit'value="发送" οnclick="" type="reset">
</div>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
//一进来就滚动到底部
$("#container").scrollTop($("#container")[0].scrollHeight);
$("#btnSubmit").click(function(){
//如果没有内容就return
var txtVal=$("#msgInput").val();
if(txtVal==''){
return false;
}
//有内容继续
$('#msgList').append('<li>'+txtVal+'</li>');
$("#container").scrollTop($("#container")[0].scrollHeight);
})
</script>
</body>
</html>