JavaScript案例：带动画的返回顶部

​

案例分析：

1. 带有动画的返回顶部
2. 继续使用我们封装的动画
3. 只需要把所有的left相关值改为跟页面垂直滚动距离相关就可以
4. 页面滚动了多少，可以通过 window.pageYOffset得到
5. 最后是页面滚动，使用window.scroll(x,y)

JavaScript——动画函数封装

核心原理：通过定时器setInterval()不断移动盒子位置。实现步骤：获得盒子当前位置让盒子在当前位置加上1个...

将以下代码添加到淘宝侧边栏案例中：

JavaScript案例：仿淘宝侧边栏

案例分析原先侧边栏是绝对定位当页面滚动到一定位置，侧边栏改为固定定位页面继续滚动，会让返回顶部显示出来。代码：&l...

代码语言：javascript复制

 //当我们点击了返回顶部模块，就让窗口滚动到页面最上方。
        goBack.addEventListener('click', function () {
            // window.scroll(0, 0);
            animate(window, 0);
        });
        //动画函数
        function animate(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
                    clearInterval(obj.timer);
                    //如果有这个参数就调用这个函数
                    if (callback) {
                        callback();
                    }
                }
                //obj.style.left = window.pageYOffset   step   "px";
                window.scroll(0, window.pageYOffset   step)
            }, 15);
        }

javascript scroll setinterval window 动画

0 人点赞