JS control scroll bar automatic scrolling

Effect

Css:

#box {
width:500px;
height:200px;
Overflow:auto;
border:1px #000 Solid;
margin:20px Auto 0;
}

Javascript:

<script type= "Text/javascript" src= "Jquery-1.8.3.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
var len1 = $ ("#box"). Get (0). scrollHeight-200;
var len2 = 0,tobottom = true;
var auto = setinterval (run,30);

function Run () {
if (Tobottom) {
Len2 + = 1;
if (len2 >= len1) {
Len2 = len1;
Tobottom = false;
}
}
else {
Len2-= 1;
if (len2 <= 0) {
len2 = 0;
Tobottom = true;
}
}

$ ("#box"). ScrollTop (LEN2);
}
})
</script>

Html:

<div id= "box" >
<p> This is line No. 001 </p>
<p> This is line No. 002 </p>
<p> This is line No. 003 </p>
<p> This is line No. 004 </p>
<p> This is line No. 005 </p>
<p> This is line No. 006 </p>
<p> This is line No. 007 </p>
<p> This is line No. 008 </p>
<p> This is line No. 009 </p>
<p> This is line No. 010 </p>
<p> This is line No. 011 </p>
<p> This is line No. 012 </p>
<p> This is line No. 013 </p>
<p> This is line No. 014 </p>
<p> This is line No. 015 </p>
<p> This is line No. 016 </p>
<p> This is line No. 017 </p>
<p> This is line No. 018 </p>
<p> This is line No. 019 </p>
<p> This is line No. 020 </p>
<p> This is line No. 021 </p>
<p> This is line No. 022 </p>
<p> This is line No. 023 </p>
<p> This is line No. 024 </p>
<p> This is line No. 025 </p>
<p> This is line No. 026 </p>
<p> This is line No. 027 </p>
<p> This is line No. 028 </p>
<p> This is line No. 029 </p>
<p> This is line No. 030 </p>
</div>

JS control scroll bar automatic scrolling