js控制滚动条自动滚动
效果如图：
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>这是第001行</p>
<p>这是第002行</p>
<p>这是第003行</p>
<p>这是第004行</p>
<p>这是第005行</p>
<p>这是第006行</p>
<p>这是第007行</p>
<p>这是第008行</p>
<p>这是第009行</p>
<p>这是第010行</p>
<p>这是第011行</p>
<p>这是第012行</p>
<p>这是第013行</p>
<p>这是第014行</p>
<p>这是第015行</p>
<p>这是第016行</p>
<p>这是第017行</p>
<p>这是第018行</p>
<p>这是第019行</p>
<p>这是第020行</p>
<p>这是第021行</p>
<p>这是第022行</p>
<p>这是第023行</p>
<p>这是第024行</p>
<p>这是第025行</p>
<p>这是第026行</p>
<p>这是第027行</p>
<p>这是第028行</p>
<p>这是第029行</p>
<p>这是第030行</p>
</div>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
