实现变速回到顶部的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自定义的函数
Aug 05 Javascript
任意位置显示html菜单
Feb 01 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
React 父子组件通信的实现方法
Dec 05 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
laravel5.6实现数值转换
2019/10/23 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
jQuery 事件队列调整方法
2009/09/18 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Python下简易的单例模式详解
2019/04/08 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
python读取xml文件方法解析
2020/08/04 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
大学生简短的自我评价分享
2014/02/20 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
领导欢迎词范文
2015/01/26 职场文书
python turtle绘图命令及案例
2021/11/23 Python