用JS改滚动条数值的小问题,谢谢了

这段代码测试了没有bug

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    .main{width:100%; height:3000px; background:#ccc;}
    .toTop{background:#fff; width:100px; height:100px; position:fixed; right:0; bottom:50%;}
</style>
<body>
<div class="main"></div>
<div class="toTop">
    <a href="javascript:void(0)" onclick="ding()">走起</a>
</div>
</body>
<script type="text/javascript">
    var timer;
    var lock=1;
    function setPageScrollTop(value){
        var a=window.navigator.userAgent;
        var z=a.toLowerCase();
        var b=z.indexOf('safari');
        if(b!=-1){
            document.body.scrollTop=value;
        }else{
            document.documentElement.scrollTop=value;
        }
    }
    function getPageScrollTop(){
        var zhi=0;
        var a=window.navigator.userAgent;
        var z=a.toLowerCase();
        var b=z.indexOf('safari');
        if(b!=-1){
            zhi=document.body.scrollTop;
        }else{
            zhi=document.documentElement.scrollTop;
        }
        return zhi;
    }
    function detail(mu){
        var dang=getPageScrollTop();
        if(dang>=mu){
            dang-=50;
            if(dang<=mu){
                dang=mu;
                window.clearInterval(timer);
                lock=1;
            }
        }else if(dang<mu){
            dang+=50;
            if(dang>=mu){
                dang=mu;
                window.clearInterval(timer);
                lock=1;
            }
        }else{}
        setPageScrollTop(dang);
    }
    function ding(){
        var mu=1000;
        if(lock==1){
            lock=0;
            timer=window.setInterval(function(){
                detail(mu)
            },30);
        }
    }
</script>
</html>

给它稍微变形了一下,就出BUG了,当滚筒条在上面的时候,点击滚动条往下走,然后用鼠标拉着滚动条往下走的时候就走不动了出现了BUG

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    *{padding:0; margin:0;}
    .main{width:100%; height:3000px; background:#ccc;}
    .toTop{background:#fff; width:100px; height:100px; position:fixed; right:0; bottom:50%;}
</style>
<body>
<div class="main"></div>
<div class="toTop">
    <a href="javascript:void(0)" onclick="ding()">走起</a>
</div>
</body>
<script type="text/javascript">
    var timer;
    var lock=1;
    function setPageScrollTop(value){
        var a=window.navigator.userAgent;
        var z=a.toLowerCase();
        var b=z.indexOf('safari');
        if(b!=-1){
            document.body.scrollTop=value;
        }else{
            document.documentElement.scrollTop=value;
        }
    }
    function getPageScrollTop(){
        var zhi=0;
        var a=window.navigator.userAgent;
        var z=a.toLowerCase();
        var b=z.indexOf('safari');
        if(b!=-1){
            zhi=document.body.scrollTop;
        }else{
            zhi=document.documentElement.scrollTop;
        }
        return zhi;
    }
    function detail(mu){
        var dang=getPageScrollTop();
        if(dang>=mu){
           var speed=Math.ceil((dang-mu)/4);
           dang=dang-speed;
           if(dang<=mu){
             dang=mu;
             window.clearInterval(timer);
            lock=1;
           }
        }else if(dang<mu){
            var speed=Math.ceil((mu-dang)/4);
            dang=dang+speed;
            if(dang>=mu){
                dang=mu;
                window.clearInterval(timer);
                lock=1;
            }
        }else{}
        setPageScrollTop(dang);
    }
    function ding(){
        var mu=1000;
        if(lock==1){
            lock=0;
            timer=window.setInterval(function(){
                detail(mu)
            },50);
        }
    }
</script>
</html>

找不到问题出在哪了,很郁闷
求解,很感谢大家

原因是楼主点了“走起”按钮后，没等滚动条稳定下来，即没调用clearInterval方法就往下拉，所以出现那个情况，为了验证说法还是贴个代码吧。

 <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    *{padding:0; margin:0;}
    .main{width:100%; height:3000px; background:#ccc;}
    .toTop{background:#fff; width:100px; height:100px; position:fixed; right:0; bottom:50%;}
</style>
<body>
<div class="main"></div>
<div class="toTop">
    <a href="javascript:void(0)" onclick="ding()">走起</a>
</div>
<div id="message" style="position:fixed;border:1px solid red;top:100px;left:100px;width:200px;height:100px;">
hello,world! 
</div>
</body>
<script type="text/javascript">
    var timer;
    var lock=1;
    function setPageScrollTop(value){
        var a=window.navigator.userAgent;
        var z=a.toLowerCase();
        var b=z.indexOf('safari');
        if(b!=-1){
            document.body.scrollTop=value;
        }else{
            document.documentElement.scrollTop=value;
        }
    }
    function getPageScrollTop(){
        var zhi=0;
        var a=window.navigator.userAgent;
        var z=a.toLowerCase();
        var b=z.indexOf('safari');
        if(b!=-1){
            zhi=document.body.scrollTop;
        }else{
            zhi=document.documentElement.scrollTop;
        }
        return zhi;
    }
    function detail(mu){
        var dang=getPageScrollTop();
        if(dang>=mu){
           var speed=Math.ceil((dang-mu)/4);

           dang=dang-speed;
           document.getElementById("message").innerHTML = "dang:" + dang;
           if(dang<=mu){
             dang=mu;
             window.clearInterval(timer);
             document.getElementById("message").innerHTML = "cleared";
            lock=1;
           }
        }else if(dang<mu){
            var speed=Math.ceil((mu-dang)/4);
            dang=dang+speed;
            document.getElementById("message").innerHTML = "dang:" + dang;
            if(dang>=mu){
                dang=mu;
                window.clearInterval(timer);
                document.getElementById("message").innerHTML = "cleared";
                lock=1;
            }
        }else{
        document.getElementById("message").innerHTML = "";
        }

        setPageScrollTop(dang);
    }
    function ding(){
        var mu=1000;
        if(lock==1){
            lock=0;
            timer=window.setInterval(function(){
                detail(mu)
            },50);
        }
    }
</script>
</html>

而原来你觉得正确的代码也有这个问题，不幸你试试在滚动条稳定之前拖拉滚动条试试。