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 相关文章推荐
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
Vue 组件注册全解析
Dec 17 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
隐性调用php程序的方法
2015/06/13 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP框架自动加载类文件原理详解
2017/06/06 PHP
php session_decode函数用法讲解
2019/05/26 PHP
JavaScript 函数replace深入了解
2013/03/14 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python 生成目录树及显示文件大小的代码
2009/07/23 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Python 如何批量更新已安装的库
2020/05/26 Python
Python3爬虫里关于代理的设置总结
2020/07/30 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
中软Java笔试题
2012/11/11 面试题
点菜员岗位职责范本
2014/02/14 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
离婚协议书范文
2015/01/26 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript
ROS系统将python包编译为可执行文件的简单步骤
2021/07/25 Python