实现变速回到顶部的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类的静态属性和实例属性的理解
Oct 01 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
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入门教程 精简版
2009/12/13 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
JS实现动态倒计时功能(天数、时、分、秒)
2019/12/12 Javascript
Openlayers实现测量功能
2020/09/25 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
python实现自动重启本程序的方法
2015/07/09 Python
python+selenium实现QQ邮箱自动发送功能
2019/01/23 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python之生成多层json结构的实现
2020/02/27 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
几道PHP面试题
2013/04/14 面试题
社区八一活动方案
2014/02/03 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript