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的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
javascript类型转换示例
Apr 29 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
判定是否原生方法的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命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
JS 对象介绍
2010/01/20 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
python中hashlib模块用法示例
2017/10/30 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python实现手机销售管理系统
2019/03/19 Python
Python登录系统界面实现详解
2019/06/25 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
2016/06/16 HTML / CSS
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
EJB的激活机制
2013/10/25 面试题
四风问题自查自纠工作情况报告
2014/10/28 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA
搭建Yolov5服务器
2022/04/30 Servers