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监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
JavaScript 常用函数库详解
Oct 21 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
jQuery使用each方法与for语句遍历数组示例
Jun 16 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
vue实现公共方法抽离
Jul 31 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
判定是否原生方法的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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP 日期加减的类,很不错
2009/10/10 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
Stop SQL Server
2007/06/21 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
JS分页效果示例
2013/10/11 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
python实现mysql的读写分离及负载均衡
2018/02/04 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
《夕阳真美》教学反思
2014/04/27 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
导游词之镇江焦山
2019/11/21 职场文书
MySQL创建表操作命令分享
2022/03/25 MySQL