实现变速回到顶部的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 相关文章推荐
对new functionName()定义一个函数的理解
May 22 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
js正则表达式简单校验方法
Jan 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中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
easyui validatebox验证
2016/04/29 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
python实现查找所有程序的安装信息
2020/02/18 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
信仰纪录片观后感
2015/06/08 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
python神经网络ResNet50模型
2022/05/06 Python
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android