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 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
Javascript的构造函数和constructor属性
Jan 09 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
微信小程序 navbar实例详解
May 11 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 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开发框架总结收藏
2008/04/24 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
在网站上应该用的30个jQuery插件整理
2011/11/03 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
在Python中使用列表生成式的教程
2015/04/27 Python
深入了解Python数据类型之列表
2016/06/24 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
中科软测试工程师面试题
2012/06/16 面试题
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
设计顾问服务计划书
2014/05/04 职场文书
护士实习求职信
2014/06/22 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
python四种出行路线规划的实现
2021/06/23 Python
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL