Three methods to make the scroll bar of div automatically scroll to the bottom

Method 1 ：

Use the anchor to mark the position to scroll to , And then through click Method to simulate clicking and scrolling to the anchor position

<script language="javascript1.2" type="text/javascript">
function onGetMessage(context) 
{
msg.innerHTML+=context;
msg_end.click(); 
} 
</script>
<div style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></div>
<div><a id="msg_end" name="1" href="#1">&nbsp</a></div>
</div>

Method 2 ：

utilize DIV Of scrollIntoView Method , Scroll the bottom end to the visible position [list=1]<script

language="javascript1.2"
type="text/javascript">
function onGetMessage(context) 
{
msg.innerHTML+=context;
msg_end.scrollIntoView(); 
} 
</script>
<div style="width:500px;overflow:auto">
<div id="msg" style="overflow:hidden;width:480px;"></div>
<div id="msg_end" style="height:0px; overflow:hidden"></div>
</div>

Method 3 ：

<script type="text/javascript">
function add()
{
var now = new Date();
var div = document.getElementById('scrolldIV');
div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
div.scrollTop = div.scrollHeight;
}
</script>
<span class="notice"> Please click on “ Insert a row ” Button , Insert the latest information , When the scroll bar appears , The scroll bar will automatically remain at the bottom .</span><br />
 
<div id="scrolldIV" style="overflow:auto; height: 100px; width: 400px; border: 1px solid #999;">
</div>
<input type="button" value=" Insert a row " onclick="add();">