让滚动条自动滚到最底部的方法：首先在div的底部添加一隐藏元素“element”；然后调用“element.scrollintoview()”方法；最后使元素滚动到可视区域即可。
如何让滚动条自动滚到最底部？
让div中的垂直滚动条自动滚到最底部
在聊天窗口中当消息增多超过消息窗体div的高度时就会出现滚动条，但此时滚动条在绝大多数浏览器中都始终位于div的顶部，这样就会导致之后的消息看不见，必须往下拖动滚动条才能看到新的消息，如果做到当出现滚动条时，滚动条始终位于div的底部呢？
方式一：设置div的scrolltop=scrollheight;
方式二：在div的底部添加一隐藏元素element，然后调用element.scrollintoview()。这里的scrollintoview是原生的方法，通过名称我们就不难发现该方法用来使元素滚动到可视区域。
为了简单起见直接将两种方式放在一起。
<html><head><style type="text/css">div{margin:0px;padding:0px;}#main{width:380px;height:102px;overflow-y:auto;border:1px solid #ddd;padding:0 10px 0 10px;}#content{width:350px;line-height:20px;}</style><script type="text/javascript"> window.onload=function(){ var i=1; var hid=document.getelementbyid('msg_end');//隐藏在消息框下面的元素 var btn=document.getelementbyid('btnsend');//添加消息的按钮 var cont=document.getelementbyid('content');//消息框 var mai=document.getelementbyid('main'); btn.onclick=function(){ cont.innerhtml+='消息内容'+i+'<br/>'; //hid.scrollintoview(false);//方式1通过调用隐藏元素的scrollintoview()方法使其可见 //mai.scrolltop=mai.scrollheight;//方式2通过设置滚动高度 i++; } }</script></head><body><div id="main"> <div id="content"></div> <span id="msg_end" style="overflow:hidden"></span></div><input type="button" id="btnsend" value="添加"/></body></html>
效果如下，滚动条始终最底部
更多相关知识，请访问！