码迷,mamicode.com
首页 > 其他好文 > 详细

返回顶部效果

时间:2020-06-07 21:28:11      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:add   整数   清除   cti   窗口   ==   一个   lazy   clear   

技术图片

 

 技术图片

 

 

技术图片

 

 

 //  点击返回顶部 让窗口滚动到顶部
        goBack.addEventListener(‘click‘, function() {
            // window.scroll(0, 0);
            animate(window, 0);
        });
        // 动画函数
        function animate(obj, target, callback) {
            // console.log(callback);  callback = function() {}  调用的时候 callback()

            // 先清除以前的定时器,只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                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();
                    // }
                    callback && callback();
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式:(目标值 - 现在的位置) / 10
                // obj.style.left = window.pageYOffset + step + ‘px‘;
                window.scroll(0, window.pageYOffset + step);
            }, 15);
        }
 

返回顶部效果

标签:add   整数   清除   cti   窗口   ==   一个   lazy   clear   

原文地址:https://www.cnblogs.com/ericblog1992/p/13061999.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!