用原生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中的History历史对象
Jan 16 Javascript
js计算页面刷新的次数
Jul 20 Javascript
jQuery的强大选择器小结
Dec 27 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
Vue多选列表组件深入详解
Mar 02 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
详细介绍PHP应用提速面面观
2006/10/09 PHP
黑夜路人出的几道php笔试题
2009/08/04 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
python简单实现刷新智联简历
2016/03/30 Python
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
ubuntu中配置pyqt4环境教程
2017/12/27 Python
Python多线程threading和multiprocessing模块实例解析
2018/01/29 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
英国高街电视:High Street TV
2018/05/22 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
档案室主任岗位职责
2014/02/12 职场文书
大堂副理的岗位职责范文
2014/02/17 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
青奥会口号
2014/06/12 职场文书
关于运动会的广播稿
2014/09/22 职场文书
2015年幼儿园元旦游艺活动策划书
2014/12/09 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
Win11 BitLocker 驱动器加密
2022/04/19 数码科技
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python