很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美)。随着近几年来 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. 判断不同浏览器,加载不同的css和js文件

    在低版本的IE中,条件注释还有效果,但是在ie9,10,11浏览器中,条件注释不起作用. 在网上找了个校验ie的方法. function isIE(){  if (window.ActiveXObje ...

  2. Hadoop(7)-HDFS客户端的API操作

    1 客户端环境准备 根据自己电脑的操作系统拷贝对应的编译后的hadoop jar包到非中文路径 配置HADOOP_HOME的环境变量,并且在path中配置hadoop的bin 重启电脑 2. Hdfs ...

  3. elasticsearch搜索引擎搭建

    在该路径下,运行elasticsearch.bat该命令,后面访问127.0.0.1:9200 出现如下界面说明启动成功 elasticsearch-head操作elasticsearch的图形界面, ...

  4. linux课后作业1

    本实验6第一题:菜单驱动程序. 随便进到某个目录,vim driver.sh 把代码写进去. #!/bin/bash function welcome() { echo -e "\n&quo ...

  5. codeforces 845A Chess Tourney

    参考:https://blog.csdn.net/zhongyuchen/article/details/77478039 #include <iostream> #include < ...

  6. 43-Identity MVC:UI

    1-打开之前写的MvcCookieAuthSample项目, 在AccountController新加Register,Login方法 public class AccountController : ...

  7. Lambda表达式详解【转】

    前言 1.天真热,程序员活着不易,星期天,也要顶着火辣辣的太阳,总结这些东西. 2.夸夸lambda吧:简化了匿名委托的使用,让你让代码更加简洁,优雅.据说它是微软自c#1.0后新增的最重要的功能之一 ...

  8. 对C语言连等式的学习

    例子如下 [pgsql@localhost soft]$ cat test1.c #include <stdlib.h> #include <stdio.h> int main ...

  9. springmvc+spring-data-jpa+hibernate环境搭建与配置

    1.JPA诞生的缘由是为了整合第三方ORM框架,建立一种标准的方式,百度百科说是JDK为了实现ORM的天下归一,目前也是在按照这个方向发展,但是还没能完全实现.在ORM框架中,Hibernate是一支 ...

  10. ES5新增数组方法(4):every

    检查数组元素的每个元素是否符合条件. // 数组中的元素全部满足指定条件返回true let arr = [1, 3, 5, 7, 9]; console.log(arr.every((value, ...