实现变速回到顶部的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基础整理1
Dec 06 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
Bootstrap实现模态框效果
Sep 30 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
用header 发送cookie的php代码
2007/03/16 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
vue组件实例解析
2017/01/10 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
vue中keep-alive组件的入门使用教程
2019/06/06 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
python计算列表内各元素的个数实例
2018/06/29 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
python 制作本地应用搜索工具
2021/02/27 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
大专生工程监理求职信
2013/10/04 职场文书
承租经营合作者协议书
2014/10/01 职场文书
2014年租房协议书范本
2014/10/30 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers