主要是设置父元素的 scrollTop 为子元素的 scrollHeight。直接上代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
#container {
overflow-y: auto;
overflow-x: hidden;
height: 150px;
border: 1px solid #000;
width: 350px;
}
</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">
<input id="msgInput" rows="2" placeholder="输入点什么" class="msg-input"></input>
<input type="button" class="btn" id="btnSubmit" value="发送" onclick="" type="reset" />
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
(function() {
// 如果scrollTop设置了超出这个容器可滚动的值, scrollTop 会被设为最大值。
$('#container').scrollTop($('#msgList')[0].scrollHeight);
$('#btnSubmit').click(function() {
var txtVal = $('#msgInput').val();
//如果没有内容就return
if (txtVal == '') {
return false;
}
//有内容继续
$('#msgList').append('<li>' + txtVal + '</li>');
$('#container').scrollTop($('#msgList')[0].scrollHeight);
});
})();
</script>
（完）