用原生js做个简单的滑动效果的回到顶部


Posted in Javascript onOctober 15, 2014

很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美)。随着近几年来 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各种复制代码收集
Sep 20 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
原生的html元素选择器类似jquery选择器
Oct 15 #Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 #Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 #Javascript
javascript模拟实现ajax加载框实例
Oct 15 #Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 #Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 #Javascript
js实现select组件的选择输入过滤代码
Oct 14 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
Yii Framework框架开发微信公众平台示例
2020/04/26 PHP
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
Sanic框架蓝图用法实例分析
2018/07/17 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
python flask中动态URL规则详解
2019/11/22 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
美国羊皮公司:Overland
2018/01/15 全球购物
安全演讲稿大全
2014/05/09 职场文书
质量负责人任命书
2014/06/06 职场文书
谢师宴邀请函
2015/02/02 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL