实现变速回到顶部的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 相关文章推荐
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
vue中 v-for循环的用法详解
Feb 19 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 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中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php格式化电话号码的方法
2015/04/24 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python分析作业提交情况
2017/11/22 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
详解Python 最短匹配模式
2020/07/29 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
家具厂厂长岗位职责
2014/01/01 职场文书
现金出纳岗位职责
2014/03/15 职场文书
公司担保书格式范文
2014/05/12 职场文书
学校督导评估方案
2014/06/10 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
简单租房协议书
2014/10/21 职场文书
2014年工商所工作总结
2014/12/09 职场文书
运动与健康自我评价
2015/03/09 职场文书
入党转正申请报告
2015/05/15 职场文书
小学运动会加油词
2015/07/18 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL