实现变速回到顶部的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 相关文章推荐
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
JS监听组合按键思路及实现过程
Apr 17 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
德生BCL3000的电路分析和打磨
2021/03/02 无线电
PHP反向代理类代码
2014/08/15 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
python解析xml文件实例分析
2015/05/27 Python
python如何实现一个刷网页小程序
2018/11/27 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
给面试官的感谢信
2014/02/01 职场文书
优秀教师主要事迹
2014/02/01 职场文书
中式婚礼主持词
2014/03/13 职场文书
财务人员个人工作总结
2015/02/27 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers