这篇文章主要介绍了基于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.scrollTop
scrollBy(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;
 
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;
 
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实现回到页面顶部的五种写法(从实现到增强)的更多相关文章

  1. JS实现回到页面顶部动画效果 2016.03.23

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...

  2. js网页返回页面顶部的小方法

    咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...

  3. vue 回到页面顶部

    模仿Element-UI 回到页面顶部 BackToTop.vue <template> <transition :name="transitionName"&g ...

  4. js关闭当前页面(窗口)的几种方式总结(转)

    js关闭当前页面(窗口)的几种方式总结     1. 不带任何提示关闭窗口的js代码 代码如下 <a href="javascript:window.opener=null;windo ...

  5. JS 跨域问题常见的五种解决方式

    一.什么是跨域? 要理解跨域问题,就先理解好概念.跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来 ...

  6. 前端 页面加载完成事件 - onload，五种写法

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...

  7. JS跳转页面常用的几种方法

    第0种:(常用) function triggerAOnclick(){ window.open("http://localhost/jwxt/forward/2TrainSchemeDat ...

  8. js去掉字符串前后空格的五种方法

    转载 :http://www.2cto.com/kf/201204/125943.html 第一种:循环检查替换[javascript]//供使用者调用  function trim(s){  ret ...

  9. js面向对象的五种写法

    第一种: //第1种写法 function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = functio ...

随机推荐

  1. 求同余方程x^A=B(mod m)的解个数(原根与指标)

    求方程:的解个数 分析:设,那么上述方程解的个数就与同余方程组:的解等价. 设同于方程的解分别是:,那么原方程的解的个数就是 所以现在的关键问题是求方程:的解个数. 这个方程我们需要分3类讨论: 第一 ...

  2. Saga的实现模式——进化（Saga implementation patterns – variations）

    在之前的几个博客中,我主要讲了两个saga的实现模式: 基于command的控制者模式 基于事件的观察者模式 当然,这些都不是实现saga的唯一方式.我们甚至可以将这些结合起来. 发布者——收集者 回 ...

  3. html5页面中 触发 拨打电话、发短信 的方式

    <a href="tel:18688888888">拨号</a> <a href="sms:18688888888">发短信 ...

  4. TSynDBSQLDataSet

    TSynDBSQLDataSet 非内存表 TSynDBSQLDataSet = class(TSynBinaryDataSet) TSynBinaryDataSet = class(TSynVirt ...

  5. docker 实现redis集群搭建

    摘要:接触docker以来,似乎养成了一种习惯,安装什么应用软件都想往docker方向做,今天就想来尝试下使用docker搭建redis集群. 首先,我们需要理论知识:Redis Cluster是Re ...

  6. NYOJ 1058 部分和问题 【DFS】

    部分和问题 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 给定整数a1.a2........an,推断能否够从中选出若干数.使它们的和恰好为K. 输入 首先,n和k ...

  7. angularJS 中的two-way data binding.

    原文: https://stackoverflow.com/questions/11616636/how-to-do-two-way-filtering-in-angularjs ---------- ...

  8. 转：http2的资料与使用

    https://imququ.com/post/http2-resource.html

  9. Android基础新手教程——4.1.2 Activity初窥门径

    Android基础新手教程--4.1.2 Activity初窥门径 标签(空格分隔): Android基础新手教程 本节引言: 上一节中我们对Activity一些主要的概念进行了了解,什么是Activ ...

  10. Destroy reall destroy ?!

    最近做战斗逻辑的时候发现一个问题 测试脚本mTest: public class mTest : MonoBehaviour { public mTest2 tmp2; void OnGUI() { ...