03.带有动画的返回顶部

滚动窗口至文档的特定位置
window.scroll(x,y)

案例分析

1.带有动画的返回顶部
2.此时可以继续使用我们封装的动画函数
3.只要把所有的跟left相关的值改为跟页面垂直滚动距离相关就可以
4.页面滚动了多少，可以通过window.pageYOffset得到

//当我们点击了返回顶部模块，就让窗口的页面滚动到页面的最上方
        goBack.addEventListener('click',function(){
            // window.scroll(0,0);//里面的x，y不跟单位
            animate(window,0);
        });
        //动画函数
        //简单动画函数封装  obj目标对象  target目标位置
        //给不同的元素指定了不同的定时器
        //缓动动画
        function animate (obj,target,callback) {
            clearInterval(obj.timer);
            //让盒子在当前位置+1距离
            //定时器重复操作，最后清除定时器
            obj.timer = setInterval(function(){
                //步长值写到定时器的里面
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //获得盒子当前的位置
                var x = window.pageYOffset;
                if(x == target){
                    clearInterval(obj.timer);
                    //回调函数写在定时器结束的位置
                    // if(callback){
                    //     //调用函数
                    //     callback();
                    // }
                    callback && callback();
                }
                // obj.style.left = x + step + 'px';
                window.scroll(0,x + step);
            },15);
        }

.