JavaScript简单实现网页回到顶部功能


Posted in Javascript onNovember 12, 2013

很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美)。随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在,于是我也跟跟风,将返回顶部功能做成了滑动效果。后来为了更贴合物理特征, 改造做成了减速的滑动效果。
首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离;再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ...

<script type="text/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);
 }
} 
</script>

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其实都是一样的,但它们只在某些浏览器中起作用。至于那哪个在哪些浏览器起作用可以自己调试一下。
如何使用?
<a href="#" onclick="goTop();return false;">TOP</a>
Javascript 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
js简单实现让文本框内容逐个字的显示出来
Oct 22 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
学习vue.js计算属性
Dec 03 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
微信小程序生成二维码的示例代码
Mar 29 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
判定是否原生方法的JS代码
Nov 12 #Javascript
给文字加上着重号的JS代码
Nov 12 #Javascript
深入理解javascript动态插入技术
Nov 12 #Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 #Javascript
JS常用正则表达式总结
Nov 12 #Javascript
jquery 删除cookie失效的解决方法
Nov 12 #Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 #Javascript
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
python写日志封装类实例
2015/06/28 Python
详解如何使用Python编写vim插件
2017/11/28 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
django使用admin站点上传图片的实例
2019/07/28 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
2015年新农村建设工作总结
2015/05/22 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技