很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美)。随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在,于是我也跟跟风,将返回顶部功能做成了滑动效果。后来为了更贴合物理特征, 改造做成了减速的滑动效果。

首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离;再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ...

先上代码吧:

01 <script type="text/javascript">
02 /**
03 * 回到页面顶部
04 * @param acceleration 加速度
05 * @param time 时间间隔 (毫秒)
06 **/
07 function goTop(acceleration, time) {
08     acceleration = acceleration || 0.1;
09     time = time || 16;
10  
11     var x1 = 0;
12     var y1 = 0;
13     var x2 = 0;
14     var y2 = 0;
15     var x3 = 0;
16     var y3 = 0;
17  
18     if (document.documentElement) {
19         x1 = document.documentElement.scrollLeft || 0;
20         y1 = document.documentElement.scrollTop || 0;
21     }
22     if (document.body) {
23         x2 = document.body.scrollLeft || 0;
24         y2 = document.body.scrollTop || 0;
25     }
26     var x3 = window.scrollX || 0;
27     var y3 = window.scrollY || 0;
28  
29     // 滚动条到页面顶部的水平距离
30     var x = Math.max(x1, Math.max(x2, x3));
31     // 滚动条到页面顶部的垂直距离
32     var y = Math.max(y1, Math.max(y2, y3));
33  
34     // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
35     var speed = 1 + acceleration;
36     window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
37  
38     // 如果距离不为零, 继续调用迭代本函数
39     if(x > 0 || y > 0) {
40         var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
41         window.setTimeout(invokeFunction, time);
42     }
43 }
44 </script>

效果演示

document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其实都是一样的,但它们只在某些浏览器中起作用。至于那哪个在哪些浏览器起作用可以自己调试一下。

如何使用?

1 <a href="#" onclick="goTop();return false;">TOP</a>

用原生JavaScript做个简单的回到顶部的更多相关文章

  1. 用原生javascript做的一个打地鼠的小游戏

    学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...

  2. 用原生javascript实现最简单的发布者-订阅者模式

    http://www.cnblogs.com/surahe/p/6065778.html 发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案.比如,我们可以订阅 ajax 请求的 ...

  3. 原生JavaScript实现一个简单的todo-list

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. JavaScript实现回到顶部

    HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面. demo: <a href="javascript:; ...

  5. 原生javascript实现老.虎机抽奖点名demo源码思路解析

    想着使用原生Javascript做一个随机点名的小应用, 也可以做抽奖使用. html简单化,人名单可以通过js生成并处理. 可以非常随意的添加修改人名字. 应用想带点特效,比如老.虎机转动的特效. ...

  6. 简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示

    1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...

  7. JavaScript做简单的购物车效果(增、删、改、查、克隆)

    比如有时候遇到下面这种情况,点击加入购物车,然后在上方的购物车中动态的添加商品以及商品的信息,我们就可以通过JavaScript实现简单的这些操作. 首先我们需要在html文档中,通过css对页面的布 ...

  8. 原生JavaScript运动功能系列(四):多物体多值链式运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...

  9. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

随机推荐

  1. Python学习手册之控制结构(二)

    在上一篇文章中,我们介绍了Python的一些控制结构,现在我们继续介绍剩下的 Python 控制结构.查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/9972 ...

  2. P1049 装箱问题

    装箱问题 题目描述 有一个箱子容量为V(正整数,0<=V<=20000),同时有n个物品(0<n<=30,每个物品有一个体积(正整数). 要求n个物品中,任取若干个装入箱内,使 ...

  3. shell重温---基础篇(printf命令&test命令)

    在shell中还有一个输出的命令,那就是printf了.它模仿的是C程序库(library)里的printf()程序,是由POSIX标准所定义,所以嘞,使用printf脚本比echo移植性要好一点,它 ...

  4. uber司机已经激活了,就是还没有上传头

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  5. java Spring boot使用spring反射

    spring 反射 当你配置各种各样的bean时,是以配置文件的形式配置的,你需要用到哪些bean就配哪些,spring容器就会根据你的需求去动态加载,你的程序就能健壮地运行. 1.可以通过类名去实例 ...

  6. Jmeter学习(三)

    Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试.(来自百度) jmeter的特点: 开源免费. ...

  7. SSH公钥认证(码云)

    开发者向码云版本库写入最常用到的协议是 SSH 协议,因为 SSH 协议使用公钥认证,可以实现无口令访问,而若使用 HTTPS 协议每次身份认证时都需要提供口令.使用 SSH 公钥认证,就涉及到公钥的 ...

  8. 自动化测试学习之路--java String、StringBuilder

    Java中的String和StringBuilder类: 1.String对象是不可变的.每一个看起来修改了String值的方法,实际上都是创建了全新的String对象.代码示例如下: String ...

  9. 第七篇数字&字符串之练习题

    1.执行Python脚本的两种方式2.简述位.字节的关系3.简述ascii.unicode.utf-­‐8.gbk的关系4.请写出“李杰”分别用utf-­‐8和gbk编码所占的位数5.Pyhton单行 ...

  10. tensorflow学习笔记(2)-反向传播

    tensorflow学习笔记(2)-反向传播 反向传播是为了训练模型参数,在所有参数上使用梯度下降,让NN模型在的损失函数最小 损失函数:学过机器学习logistic回归都知道损失函数-就是预测值和真 ...