用原生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 Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
原生的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中空字符串和0之间的关系
2016/10/23 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
Jquery.Form 异步提交表单的简单实例
2014/03/03 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
基于Vue实现后台系统权限控制的示例代码
2017/08/29 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python遍历指定文件及文件夹的方法
2015/05/09 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python里运用私有属性和方法总结
2019/07/08 Python
Python @property使用方法解析
2019/09/17 Python
python实现大学人员管理系统
2019/10/25 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
安全教育月活动总结
2014/05/05 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
社区活动总结范文
2015/05/07 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
docker 制作mysql镜像并自动安装
2022/05/20 Servers