实现变速回到顶部的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和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 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
Protoss兵种介绍
2020/03/14 星际争霸
PHP学习之PHP运算符
2006/10/09 PHP
一周学会PHP(视频)Http下载
2006/12/12 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
2018/11/01 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
Promise扫盲贴
2019/06/24 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
python list转dict示例分享
2014/01/28 Python
Python while 循环使用的简单实例
2016/06/08 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
Python装饰器语法糖
2019/01/02 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python Des加密解密如何实现软件注册码机器码
2020/01/08 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
出纳试用期自我鉴定范文
2014/09/16 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
看上去很美观后感
2015/06/10 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers