实现变速回到顶部的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 相关文章推荐
通过JAVAScript实现页面自适应
Jan 19 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
JS删除String里某个字符的方法
Jan 06 Javascript
js实现二级联动简单实例
Jan 11 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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源码加密 仿微盾PHP加密专家(PHPCodeLock)
2010/05/06 PHP
php中inlcude()性能对比详解
2012/09/16 PHP
使用PHP求两个文件的相对路径
2013/06/20 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
Python实现多进程的四种方式
2019/02/22 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
什么是makefile? 如何编写makefile?
2013/01/02 面试题
元旦联欢会感言
2014/03/04 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
无传销社区工作方案
2014/05/13 职场文书
2014年统战工作总结
2014/12/09 职场文书
2014年财政工作总结
2014/12/10 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书