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 input textare 事件绑定及用法学习
Apr 03 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 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程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
js实现交通灯效果
2017/01/13 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python检测网络延迟的代码
2018/05/15 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
感恩节活动策划方案
2014/05/16 职场文书
2014年党总支工作总结
2014/12/18 职场文书
《落花生》教学反思
2016/02/16 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript