实现变速回到顶部的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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 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
基于mysql的bbs设计(一)
2006/10/09 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
vue项目实战总结篇
2018/02/11 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
Python命名空间详解
2014/08/18 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
一款纯css3实现的响应式导航
2014/10/31 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
super()与this()的区别
2016/01/17 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
教师档案管理制度
2014/01/23 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
黄金搭档广告词
2014/03/21 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
作文评语怎么写
2014/12/25 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
Jsonp劫持学习
2021/04/01 PHP