带运动的返回顶部

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                right: 0;
                top: 0;
            }
        </style>
        <script>
            window.onload=function(){
                var oDiv=document.getElementById("div1");
                var iTimer=null;
                var b=0;
                setTop();
                window.onscroll=function(){
                    setTop();
                    if(b!=1){
                        //如果b=1,那么当前的scroll事件是被定时器所触发，如果不等于1，那么就是非定时器的其他任何一个操作触发该事件
                        clearInterval(iTimer);
                    }
                }
                oDiv.onclick=function(){
                    clearInterval(iTimer);
                    var iCur=iSpeed=0;
                    iTimer=setInterval(function(){
                        iCur=document.documentElement.scrollTop || document.body.scrollTop;
                        iSpeed=Math.floor((0-iCur)/8);
                        if(iCur==0){
                            clearInterval(iTimer);
                        }else{
                            document.documentElement.scrollTop=document.body.scrollTop=iCur+iSpeed;
                        }
                        document.title+=1;
                        b=1;
                    },30)
                }
                function setTop(){
//                    滚动条滚动的高
                    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//                                    滚动条滚动的高+可视区的高-自身的高
                    oDiv.style.top=scrollTop+document.documentElement.clientHeight - oDiv.offsetHeight + "px";
                }
            }
        </script>
    </head>
    <body style="height: 2000px;">
        <div id="div1"></div>
    </body>
</html>
带运动的返回顶部

猜你喜欢
