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全部源代码
May 04 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
Node.js操作系统OS模块用法分析
Jan 04 Javascript
微信小程序实现左滑删除效果
Nov 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
PHP微信红包API接口
2015/12/05 PHP
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
详解node中创建服务进程
2017/05/09 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
React diff算法的实现示例
2018/04/20 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
粗略分析Python中的内存泄漏
2015/04/23 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
keras.layer.input()用法说明
2020/06/16 Python
python speech模块的使用方法
2020/09/09 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
书法大赛策划方案
2014/06/04 职场文书
校园运动会广播稿
2014/10/06 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
个人年终总结结尾
2015/03/06 职场文书
800字作文之大雪
2019/12/04 职场文书