博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
缓动小算法
阅读量:5130 次
发布时间:2019-06-13

本文共 1549 字,大约阅读时间需要 5 分钟。

/*

1.每次移动剩余距离的一半。
简单的公式表示 nA = A - (A - B) / 2
简单的公式表示 48 = 64 - (64 - 32) / 2
我下一秒的位置 = 现在位置 - 现在和初恋之间距离的一半
*/

window.requestAnimFrame = (function(){        return  window.requestAnimationFrame       ||                window.webkitRequestAnimationFrame ||                window.mozRequestAnimationFrame    ||                function( callback ){                    window.setTimeout(callback, 1000 / 60);                };    })();function backToTop(start, end, rate, callback){    if(start == end || typeof start != "number") return;    var doc = document.documentElement.scrollTop ? document.document : document.body;    var step = function(){        start = start - (start - end) / rate;        if(Math.abs(start-end) < 1){            doc.scrollTop = 0;            if(callback){                callback();            }            return;        }        doc.scrollTop = start;        requestAnimationFrame(step);    }    step();}function getScroll(){    if(window.pageXOffset != undefined){        return {            x : window.pageXOffset,            y : window.pageYOffset        }    }    if(document.compatMode == "CSS1Compat"){        return {            x : document.documentElement.scrollLeft,            y : document.documentElement.scrollTop        }    }    return {        x : document.body.scrollLeft,        y : document.body.scrollTop    }}

调用

clock.onclick = function(){    var offsetY = getScroll().y;    backToTop(offsetY, 0, 4, function(){        console.log("回到顶部了")    });}

 

转载于:https://www.cnblogs.com/alantao/p/7463149.html

你可能感兴趣的文章
关于mysql中GROUP_CONCAT函数的使用
查看>>
OD使用教程20 - 调试篇20
查看>>
Java虚拟机(JVM)默认字符集详解
查看>>
Java Servlet 过滤器与 springmvc 拦截器的区别?
查看>>
(tmp >> 8) & 0xff;
查看>>
linux命令之ifconfig详细解释
查看>>
NAT地址转换
查看>>
Nhibernate 过长的字符串报错 dehydration property
查看>>
Deque - leetcode 【双端队列】
查看>>
人物角色群体攻击判定(一)
查看>>
一步步学习微软InfoPath2010和SP2010--第九章节--使用SharePoint用户配置文件Web service(2)--在事件注册表单上创建表单加载规则...
查看>>
gulp插件gulp-ruby-sass和livereload插件
查看>>
免费的大数据学习资料,这一份就足够
查看>>
clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight
查看>>
MySQL(一)
查看>>
企业级应用与互联网应用的区别
查看>>
steelray project viewer
查看>>
itext jsp页面打印
查看>>
HTTP之报文
查看>>
Perl正则表达式匹配
查看>>