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 相关文章推荐
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
浅析Vue中method与computed的区别
Mar 06 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开发GUI
2006/10/09 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
js 分页全选或反选标识实现代码
2011/08/09 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
Node.js中的流(Stream)介绍
2015/03/30 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
新三好学生主要事迹
2014/01/23 职场文书
全神贯注教学反思
2014/02/03 职场文书
安全生产演讲稿
2014/05/09 职场文书
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers