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 美元符冲突的解决方法
Mar 28 Javascript
JQuery datepicker 使用方法
May 20 Javascript
js遍历td tr等html元素
Dec 13 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
js构造函数创建对象是否加new问题
2018/01/22 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python实现的文件同步服务器实例
2015/06/02 Python
Python编码爬坑指南(必看)
2016/06/10 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
python采集微信公众号文章
2018/12/20 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
python打开使用的方法
2019/09/30 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
详解python tcp编程
2020/08/24 Python
客服服务心得体会
2013/12/30 职场文书
财务总监岗位职责
2014/03/07 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
个人求职信格式范文
2015/03/20 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
民事申诉状范本
2015/05/20 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书