实现变速回到顶部的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类(纯JS, Ajax模式)
Mar 12 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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设计模式 Strategy(策略模式)
2011/06/26 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
JavaScript下拉菜单功能实例代码
2017/03/01 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
python能在浏览器能运行吗
2020/06/17 Python
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
校庆接待方案
2014/03/18 职场文书
保护地球的标语
2014/06/17 职场文书
护士先进个人总结
2015/02/13 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
Redis+AOP+自定义注解实现限流
2022/06/28 Redis