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 相关文章推荐
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
js select option对象小结
Dec 20 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
js实现全选和全不选功能
Jul 28 Javascript
原生js实现弹窗消息动画
Nov 20 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
php MessagePack介绍
2013/10/06 PHP
php导出excel格式数据问题
2014/03/11 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
php PDO异常处理详解
2016/11/20 PHP
微信自定义分享php代码分析
2016/11/24 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
javascript 面向对象编程 function也是类
2009/09/17 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
js日期联动示例
2014/05/02 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
sso跨域写cookie的一段js脚本(推荐)
2016/05/25 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python中pyplot基础图标函数整理
2020/11/10 Python
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
大学生党课感想
2015/08/11 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL