聊天窗口内容滚动到底部的方法scrollTop和scrollIntoView

测试内容样式：
<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>

<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="发送" onclick="" type="reset">
</div>

1、第一种方法：scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。<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();
// alert(txtVal);
if(txtVal==''){
return false;
}
//有内容继续
$('#msgList').append('<li>'+txtVal+'</li>');
$("#container").scrollTop($("#container")[0].scrollHeight);
})
</script>浏览器兼容：

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

2、第二种方法：使用JS原生提供的Element.scrollIntoView()可以定位到指定元素的位置
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
//进来的时候自动滚到底部
($('#msgList').children("li:last-child")[0]).scrollIntoView();
$("#btnSubmit").click(function(){
//如果没有内容就return
var txtVal=$("#msgInput").val();
// alert(txtVal);
if(txtVal==''){
return false;
}
//有内容继续
$('#msgList').append('<li>'+txtVal+'</li>');
setTimeout(function () {
($('#msgList').children("li:last-child")[0]).scrollIntoView();
},100);
})
</script>直接用：<li onclick="javascript:document.getElementById('here').scrollIntoView()"></li>