实现变速回到顶部的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 相关文章推荐
splice slice区别
Oct 09 Javascript
javascript 面向对象编程 function也是类
Sep 17 Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
浅谈React Event实现原理
Sep 20 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
vue实现表格合并功能
Dec 01 Vue.js
js前端对于大量数据的展示方式及处理方法
Dec 02 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
php Try Catch异常测试
2009/03/01 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
PHP实现小偷程序实例
2016/10/31 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Python datetime时间格式化去掉前导0
2014/07/31 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
快速入门python学习笔记
2017/12/06 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python下载的库包存放路径
2020/07/27 Python
python 如何上传包到pypi
2020/12/24 Python
python制作抽奖程序代码详解
2021/01/15 Python
python 将Excel转Word的示例
2021/03/02 Python
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
党员个人剖析材料(四风问题)
2014/10/07 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
Web应用开发TypeScript使用详解
2022/05/25 Javascript