很多网页在下方都会放置一个“返回顶部”按钮,尤其是页面底部没有导航的网页,这样可以帮助访客重新找到导航或者重温一遍广告(想得真美)。随着近几年来 JavaScript 的应用日渐广泛,滑动效果无处不在,于是我也跟跟风,将返回顶部功能做成了滑动效果。后来为了更贴合物理特征, 改造做成了减速的滑动效果。
首先说一下原理吧,我们会获取滚动条到页面顶部的距离,然后上移一定的距离;再获取滚动条到页面顶部的距离,上移一定的距离(比上一次小一点);以此类推 ...
先上代码吧:
01 |
<script type= "text/javascript" > |
04 |
* @param acceleration 加速度 |
05 |
* @param time 时间间隔 (毫秒) |
07 |
function goTop(acceleration, time) { |
08 |
acceleration = acceleration || 0.1; |
18 |
if (document.documentElement) { |
19 |
x1 = document.documentElement.scrollLeft || 0; |
20 |
y1 = document.documentElement.scrollTop || 0; |
23 |
x2 = document.body.scrollLeft || 0; |
24 |
y2 = document.body.scrollTop || 0; |
26 |
var x3 = window.scrollX || 0; |
27 |
var y3 = window.scrollY || 0; |
30 |
var x = Math.max(x1, Math.max(x2, x3)); |
32 |
var y = Math.max(y1, Math.max(y2, y3)); |
34 |
// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 |
35 |
var speed = 1 + acceleration; |
36 |
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); |
40 |
var invokeFunction = "goTop(" + acceleration + ", " + time + ")" ; |
41 |
window.setTimeout(invokeFunction, time); |
效果演示
document.documentElement.scrollTop, document.body.scrollTop, window.scrollY 其实都是一样的,但它们只在某些浏览器中起作用。至于那哪个在哪些浏览器起作用可以自己调试一下。
如何使用?
1 |
<a href= "#" onclick= "goTop();return false;" >TOP</a> |
- 用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...
- 用原生javascript实现最简单的发布者-订阅者模式
http://www.cnblogs.com/surahe/p/6065778.html 发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案.比如,我们可以订阅 ajax 请求的 ...
- 原生JavaScript实现一个简单的todo-list
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- JavaScript实现回到顶部
HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面. demo: <a href="javascript:; ...
- 原生javascript实现老.虎机抽奖点名demo源码思路解析
想着使用原生Javascript做一个随机点名的小应用, 也可以做抽奖使用. html简单化,人名单可以通过js生成并处理. 可以非常随意的添加修改人名字. 应用想带点特效,比如老.虎机转动的特效. ...
- 简单地做一下“回到顶部”按钮,用jQuery实现其隐藏和显示
1.首先,我们要准备HTML代码: <div id="return-top"> <a href="#top">返回顶部</a> ...
- JavaScript做简单的购物车效果(增、删、改、查、克隆)
比如有时候遇到下面这种情况,点击加入购物车,然后在上方的购物车中动态的添加商品以及商品的信息,我们就可以通过JavaScript实现简单的这些操作. 首先我们需要在html文档中,通过css对页面的布 ...
- 原生JavaScript运动功能系列(四):多物体多值链式运动
原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
随机推荐
- Python学习手册之控制结构(二)
在上一篇文章中,我们介绍了Python的一些控制结构,现在我们继续介绍剩下的 Python 控制结构.查看上一篇文章请点击:https://www.cnblogs.com/dustman/p/9972 ...
- P1049 装箱问题
装箱问题 题目描述 有一个箱子容量为V(正整数,0<=V<=20000),同时有n个物品(0<n<=30,每个物品有一个体积(正整数). 要求n个物品中,任取若干个装入箱内,使 ...
- shell重温---基础篇(printf命令&test命令)
在shell中还有一个输出的命令,那就是printf了.它模仿的是C程序库(library)里的printf()程序,是由POSIX标准所定义,所以嘞,使用printf脚本比echo移植性要好一点,它 ...
- uber司机已经激活了,就是还没有上传头
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- java Spring boot使用spring反射
spring 反射 当你配置各种各样的bean时,是以配置文件的形式配置的,你需要用到哪些bean就配哪些,spring容器就会根据你的需求去动态加载,你的程序就能健壮地运行. 1.可以通过类名去实例 ...
- Jmeter学习(三)
Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试.(来自百度) jmeter的特点: 开源免费. ...
- SSH公钥认证(码云)
开发者向码云版本库写入最常用到的协议是 SSH 协议,因为 SSH 协议使用公钥认证,可以实现无口令访问,而若使用 HTTPS 协议每次身份认证时都需要提供口令.使用 SSH 公钥认证,就涉及到公钥的 ...
- 自动化测试学习之路--java String、StringBuilder
Java中的String和StringBuilder类: 1.String对象是不可变的.每一个看起来修改了String值的方法,实际上都是创建了全新的String对象.代码示例如下: String ...
- 第七篇数字&字符串之练习题
1.执行Python脚本的两种方式2.简述位.字节的关系3.简述ascii.unicode.utf-‐8.gbk的关系4.请写出“李杰”分别用utf-‐8和gbk编码所占的位数5.Pyhton单行 ...
- tensorflow学习笔记(2)-反向传播
tensorflow学习笔记(2)-反向传播 反向传播是为了训练模型参数,在所有参数上使用梯度下降,让NN模型在的损失函数最小 损失函数:学过机器学习logistic回归都知道损失函数-就是预测值和真 ...