实现变速回到顶部的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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
帮助避免错误的Javascript陷阱清单
May 31 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
KnockoutJs快速入门教程
May 16 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php Session存储到Redis的方法
2013/11/04 PHP
php HTML无刷新提交表单
2016/04/05 PHP
Use Word to Search for Files
2007/06/15 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
会计毕业自我鉴定
2014/02/05 职场文书
中考冲刺决心书
2014/03/11 职场文书
篮球赛口号
2014/06/18 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
学生个人总结范文
2015/02/15 职场文书