3 ways to automatically scroll the DIV's scroll bar to the bottom (recommended) _javascript tips

To make an online chat program, when making the final touches, you need to scroll to get the information immediately to ensure that the user always sees the latest news.

The chat program is based on Ajax design, no frame, message container is a div, so the problem lies in how to control the div scroll bar.

But the same code came to me here but completely ineffective, and carefully checked the data said the XHTML standard under the scrolltop value of constant 0, the solution is to use Document.documentElement.scrollTop instead of Document.body.scrollTop, said half a day to solve the whole page of the scroll bar. I can not use this method, because it is not a frame structure, so it is impossible to use the body scroll bar to control the browsing information.

There is little information on the internet about the problem, even Csdn said there is no way.

Don't give up, then check the DHTML Manual learned that Div has a doscroll method can be used to simulate the scroll bar click, but it is disappointing to me here is completely ineffective, is not XHTML support?

Finally I found three ways to control the scrolling of DIV content:

Method One:

Use the anchor mark where you want to scroll to, and then click to simulate clicking to scroll to the anchor location

<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" > </a></div>
</div>

Method Two:

Using the scrollIntoView method of Div, 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 Three:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

The above is a small series for everyone to let div scroll automatically scroll to the bottom of the 3 methods (recommended) All the content, hope to help you, a lot of support cloud Habitat Community ~