两个动画函数的分析

写了两个回到顶部的函数

一个是这样的：

function fanhui(){
        var dist;
        var timer;
        var flag=true;
        var up_btn=document.getElementById("up_btn");
        var clientHeight=document.documentElement.clientHeight;
        window.onscroll=function(){

            var height=document.documentElement.scrollTop||document.body.scrollTop;
            if(height>=clientHeight){
                up_btn.style.display="block";
            }else{
                up_btn.style.display="none";
            }
            if(flag==false){
                clearTimeout(timer);
            }
            flag=false;

        }
        up_btn.onclick=function(){
            moveElement(30);
        }
        function moveElement(interval){
            var height=document.documentElement.scrollTop||document.body.scrollTop;
            dist=Math.ceil(height/10);
            console.log(dist);
            document.documentElement.scrollTop=document.body.scrollTop-=dist;
            if((document.documentElement.scrollTop>0)||(document.body.scrollTop>0)){
                timer=setTimeout(function(){
                   moveElement(interval);
                },interval);
            }else{
                clearTimeout(timer);
            }
            flag=true;
        }
    }
    fanhui()

另外一个是这样的

 function fanhui(){
            var btn=document.getElementById("up_btn");
            var timer=null;
            var flag=true;
            var clientHeight=document.documentElement.clientHeight;

            window.onscroll=function(){ 

               var height= document.documentElement.scrollTop||document.body.scrollTop;
               if(height>=clientHeight){
                    btn.style.display="block";
                }else{
                    btn.style.display="none";
                }
               if(flag==false){

                    clearInterval(timer);

                }
                flag=false;
            }
            btn.onclick=function(){
                timer=setInterval(function(){
                    var height= document.documentElement.scrollTop||document.body.scrollTop;
                    var ispeed=Math.ceil(height/10);

                    console.log(ispeed); document.documentElement.scrollTop=document.body.scrollTop-=ispeed;

                    flag=true;
                    if(height==0){
                        clearInterval(timer);
                    }
                },30)
            }

        }
        fanhui();
 })

其中，想要的结果为，首先能够实现回到顶部的效果，而且是在距离顶部的距离越小的情况下，其移动的速度越慢。其次，其能够实现在向上滑动的过程中，若移动滚轮将会结束滑动的效果。

Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数。

第二个滑动函数：主要是设置了一个setInterval函数让其能够每隔30毫秒执行一次，每次获取滚动的高度，然后取其高度的十分之一作为每次向上滑动的距离，当高度为0的时候，清除setInterval函数。我们在控制台输出speed可以看出每次speed的变化。

第一个滑动函数，是进行了递归调用，首先获取滚动条滚动的高度，然后判断高度，如果height>0，那么30毫秒后执行滑动函数，如此循环，直到height为0的时候跳出该函数，递归结束。需要注意的是递归调用的函数不要忘记传递参数。

实践证明这两个函数的执行效果是一样的。