js回到顶部------转载
【1】锚点
使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置
[注意]关于锚点的详细信息移步至此
|
1
2
3
4
|
<body style="height:2000px;"><div id="topAnchor"></div><a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a></body> |
【2】scrollTop
scrollTop属性表示被隐藏在内容区域上方的像素数。元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度
由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能
[注意]关于页面的scrollTop的兼容问题详细内容移步至此
|
1
2
3
4
5
6
7
8
|
<body style="height:2000px;"><button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button><script>test.onclick = function(){document.body.scrollTop = document.documentElement.scrollTop = 0;}</script></body> |
【3】scrollTo()
scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角
设置scrollTo(0,0)可以实现回到顶部的效果
|
1
2
3
4
5
6
7
8
|
<body style="height:2000px;"><button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button><script>test.onclick = function(){scrollTo(0,0);}</script></body> |
【4】scrollBy()
scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量
只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果
|
1
2
3
4
5
6
7
8
9
|
<body style="height:2000px;"><button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button><script>test.onclick = function(){var top = document.body.scrollTop || document.documentElement.scrollTopscrollBy(0,-top);}</script></body> |
【5】scrollIntoView()
Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域
该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true
使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果
|
1
2
3
4
5
6
7
8
9
|
<body style="height:2000px;"><div id="target"></div><button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button><script>test.onclick = function(){target.scrollIntoView();}</script></body> |
增强
下面对回到顶部的功能进行增强
【1】显示增强
使用CSS画图，将“回到顶部”变成可视化的图形(如果兼容IE8-浏览器，则用图片代替)
使用CSS伪元素及伪类hover效果，当鼠标移动到该元素上时，显示回到顶部的文字，移出时不显示
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<style>.box{position:fixed;right:10px;bottom: 10px;height:30px;width: 50px; text-align:center;padding-top:20px; background-color: lightblue;border-radius: 20%;overflow: hidden;}.box:hover:before{top:50%}.box:hover .box-in{visibility: hidden;}.box:before{position: absolute;top: -50%;left: 50%;transform: translate(-50%,-50%);content:'回到顶部';width: 40px;color:peru;font-weight:bold;} .box-in{visibility: visible;display:inline-block;height:20px;width: 20px;border: 3px solid black;border-color: white transparent transparent white;transform:rotate(45deg);}</style><body style="height:2000px;"><div id="box" class="box"><div class="box-in"></div></div> </body> |
【2】动画增强
为回到顶部增加动画效果，滚动条以一定的速度回滚到顶部
动画有两种：一种是CSS动画，需要有样式变化配合transition；一种是javascript动画，使用定时器来实现
在上面的5种实现中，scrollTop、scrollTo()和scrollBy()方法可以增加动画，且由于无样式变化，只能增加javascript动画
定时器又有setInterval、setTimeout和requestAnimationFrame这三种可以使用，下面使用性能最好的定时器requestAnimationFrame来实现
[注意]IE9-浏览器不支持该方法，可以使用setTimeout来兼容
1、增加scrollTop的动画效果
使用定时器，将scrollTop的值每次减少50，直到减少到0，则动画完毕
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>var timer = null;box.onclick = function(){cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){var oTop = document.body.scrollTop || document.documentElement.scrollTop;if(oTop > 0){document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;timer = requestAnimationFrame(fn);}else{cancelAnimationFrame(timer);} });}</script> |
2、增加scrollTo()动画效果
将scrollTo(x,y)中的y参数通过scrollTop值获取，每次减少50，直到减少到0，则动画完毕
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>var timer = null;box.onclick = function(){cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){var oTop = document.body.scrollTop || document.documentElement.scrollTop;if(oTop > 0){scrollTo(0,oTop-50);timer = requestAnimationFrame(fn);}else{cancelAnimationFrame(timer);} });}</script> |
3、增加scrollBy()动画效果
将scrollBy(x,y)中的y参数设置为-50，直到scrollTop为0，则回滚停止
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script>var timer = null;box.onclick = function(){cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){var oTop = document.body.scrollTop || document.documentElement.scrollTop;if(oTop > 0){scrollBy(0,-50);timer = requestAnimationFrame(fn);}else{cancelAnimationFrame(timer);} });}</script> |
实现
由于scrollTop、scrollBy()和scrollTo()方法，都以scrollTop值是否减少为0作为动画停止的参照，且三个动画的原理和实现都基本相似，性能也相似。最终，以最常用的scrollTop属性实现动画增强效果
当然，如果觉得50的速度不合适，可以根据实际情况进行调整
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<style>.box{position:fixed;right:10px;bottom: 10px;height:30px;width: 50px; text-align:center;padding-top:20px; background-color: lightblue;border-radius: 20%;overflow: hidden;}.box:hover:before{top:50%}.box:hover .box-in{visibility: hidden;}.box:before{position: absolute;top: -50%;left: 50%;transform: translate(-50%,-50%);content:'回到顶部';width: 40px;color:peru;font-weight:bold;} .box-in{visibility: visible;display:inline-block;height:20px;width: 20px;border: 3px solid black;border-color: white transparent transparent white;transform:rotate(45deg);}</style><body style="height:2000px;"><div id="box" class="box"><div class="box-in"></div></div> </body><script>var timer = null;box.onclick = function(){cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn(){var oTop = document.body.scrollTop || document.documentElement.scrollTop;if(oTop > 0){document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;timer = requestAnimationFrame(fn);}else{cancelAnimationFrame(timer);} });}</script> |
js回到顶部------转载的更多相关文章
- 详解原生JS回到顶部
第一次知道可以用超链接(锚点)实现回到顶部的时候我是很震惊的,想着原来可以这么简单啊!但是作为一个正在学习JS的小白,不能就这么轻易止步,所以查资料自己整了一个JS返回顶部. HTML代码: ? 1 ...
- js回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js回到顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- JS回到顶部代码小记
HTML: <div id="goTop"> <a href="#top"><img src="~/Content/th ...
- css+js回到顶部
.backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; c ...
- js回到顶部 动画速度 （自己记录）
x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...
- JS 回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 通过js实现回到顶部功能
许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...
- animate平滑回到顶部
Js: //回到顶部 $(".totop").click(function () { $("body,html").animate({scrollTop: 0} ...
随机推荐
- input type="radio" 赋值问题
之前项目中 后台传值 然后赋给单选input 在网上找了好久,现在有时间了,整理一下 ,方便以后有人会用到. $('radio[name="sex"][value'" ...
- 项目实战——企业级Zabbix监控实战（一）
项目实战--企业级Zabbix监控实战 实验一:Zabbix监控的搭建 1.实验准备 centos系统服务器3台. 一台作为监控服务器, 两台台作为被监控节点, 配置好yum源. 防火墙关闭. 各节点 ...
- Android智能下拉刷新加载框架—看这些就够了
一些值得学习的几个下拉刷新上拉加载开源库 Android智能下拉刷新框架-SmartRefreshLayout 支持所有的 View(AbsListView.RecyclerView.WebView. ...
- 读Kafka Consumer源码
最近一直在关注阿里的一个开源项目:OpenMessaging OpenMessaging, which includes the establishment of industry guideline ...
- TCP/IP协议栈 --- IP路由
IP路由:当一个IP包在主机发送出去或者在网络当中时,是怎么选择路径到达目的主机的呢? 一般情况下, 如果说源主机和目的主机在同一个网络中的话,那个数据报可以直接到达目的主机而不经过路由器,下面可以试 ...
- 全本 | iKcamp翻译 | 《JavaScript 轻量级函数式编程》|《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson - <You-Dont-Know-JS>作者 译者团队(排名不分先后):阿希.blueken.bruc ...
- TCP程序中发送和接收数据
这里我们来探讨一下在网络编程过程中,有关read/write 或者send/recv的使用细节.这里有关常用的阻塞/非阻塞的解释在网上有很多很好的例子,这里就不说了,还有errno ==EAGAIN ...
- window.setInterval与window.setTimeout使用实例
<script type="text/javascript"> var arrived = false; var num = 0; var timer = window ...
- AB串
题目: 给定n个A和2n个B.用这些字符拼成一个字符串.要求这个串的全部前缀和后缀B的个数始终不少于A. (一个字符串的前缀是仅仅从开头到某个位置为止的子串,后缀是仅仅从某个位置到结尾的子串). 输入 ...
- TempData知多少
网上对TempData的总结为: 保存在session中,Controller每次执行请求时,会从session中一次获取所有tempdata数据,保存在单独的内部数据字典中,而后从session中清 ...