实现变速回到顶部的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代码
Dec 01 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 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
一些星际专用术语解释
2020/03/04 星际争霸
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
js交换排序 冒泡排序算法(Javascript版)
2014/10/04 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
基于javascript实现日历功能原理及代码实例
2020/05/07 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
python 默认参数问题的陷阱
2016/02/29 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
Django多数据库联用实现方法解析
2020/11/12 Python
美国最大的宠物用品零售商:PetSmart
2016/11/14 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
清明节网上祭英烈寄语2015
2015/03/04 职场文书
自荐信范文
2019/05/20 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
python ansible自动化运维工具执行流程
2021/06/24 Python
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
Django模型层实现多表关系创建和多表操作
2021/07/21 Python