实现变速回到顶部的JavaScript代码


Posted in Javascript onMay 09, 2011

随着近几年来 JavaScript 的应用日渐广泛, 滑动效果无处不在, 于是我也跟跟风, 将置顶功能做成了滑动效果. 后来为了更贴合物理特征, 改造做成了减速的滑动效果.
首先说一下原理吧. 我们会获取滚动条到页面顶部的距离, 然后上移一定的距离; 再获取滚动条到页面顶部的距离, 上移一定的距离 (比上一次小一点); ...
JavaScript 代码:

/** 
* 回到页面顶部 
* @param acceleration 加速度 
* @param time 时间间隔 (毫秒) 
**/ 
function goTop(acceleration, time) { 
acceleration = acceleration || 0.1; 
time = time || 16; 
var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 0; 
var x3 = 0; 
var y3 = 0; 
if (document.documentElement) { 
x1 = document.documentElement.scrollLeft || 0; 
y1 = document.documentElement.scrollTop || 0; 
} 
if (document.body) { 
x2 = document.body.scrollLeft || 0; 
y2 = document.body.scrollTop || 0; 
} 
var x3 = window.scrollX || 0; 
var y3 = window.scrollY || 0; 
// 滚动条到页面顶部的水平距离 
var x = Math.max(x1, Math.max(x2, x3)); 
// 滚动条到页面顶部的垂直距离 
var y = Math.max(y1, Math.max(y2, y3)); 
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 
var speed = 1 + acceleration; 
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); 
// 如果距离不为零, 继续调用迭代本函数 
if(x > 0 || y > 0) { 
var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; 
window.setTimeout(invokeFunction, time); 
} 
}

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其实都是一样的, 但它们只在某些浏览器中起作用. 至于那哪个在哪些浏览器起作用可以自己调试一下.
HTML 代码:
<a href="#" onclick="goTop();return false;">TOP</a>
Javascript 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
Ext 表单布局实例代码
Apr 30 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
JS字符串与二进制的相互转化实例代码详解
Jun 28 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 #Javascript
Chrome Form多次提交表单问题的解决方法
May 09 #Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 #Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 #Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 #Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 #Javascript
基于jQuery的倒计时插件代码
May 07 #Javascript
You might like
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
NodeJS制作爬虫全过程
2014/12/22 NodeJs
javascript拖拽应用实例
2016/03/25 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Python 如何实现访问者模式
2020/07/28 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
法学个人求职信范文
2014/01/27 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
高二数学教学反思
2016/02/18 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
java多态注意项小结
2021/10/16 Java/Android
MySQL窗口函数的具体使用
2021/11/17 MySQL
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript