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>

转载于:https://www.cnblogs.com/k13web/p/4139587.html