JS实现回到页面顶部的五种写法及平滑滚动动画增强教程

实现方案概述

回到页面顶部的五种基础实现

【1】锚点链接法

利用锚点链接是实现回到顶部功能最简单的方式。具体做法是在页面顶部设置一个带有特定名称的锚点，然后在页面底部放置一个指向该锚点的链接。当用户点击该链接时，浏览器会自动跳转至顶部的锚点位置。

[注意]关于锚点的详细信息移步至此


<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的兼容问题详细内容移步至此


<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)方法用于将当前窗口显示的文档滚动到指定坐标点，使文档中由x和y坐标指定的位置位于显示区域的左上角。

通过调用scrollTo(0, 0)，可以将页面滚动至最顶部，从而实现回到顶部的效果。


<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参数分别指定水平和垂直方向的滚动量。

只需将当前页面的滚动长度作为参数传入，并执行逆向滚动操作，即可实现回到顶部的效果。


<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。

此方法的原理与锚点类似：在页面最上方设置一个目标元素，当页面滚动时该元素移出可视区。点击回到顶部按钮后，调用该方法使目标元素重新回到可视区域，从而达到预期效果。


<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效果，当鼠标悬停在元素上时显示“回到顶部”文字，鼠标移出时隐藏文字。


<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】动画效果增强

为回到顶部功能添加动画效果，使滚动条以特定速度平滑回滚至顶部。

动画实现分为两类：一是依赖样式变化配合transition的CSS动画；二是使用定时器实现的JavaScript动画。

在上述五种实现方式中，scrollTop、scrollTo()和scrollBy()方法均可增加动画效果。由于这些方法不涉及样式变化，因此只能采用JavaScript动画。

JavaScript定时器主要包括setInterval、setTimeout和requestAnimationFrame三种。其中，requestAnimationFrame性能最佳，下文将使用该方法实现动画。

[注意]IE9-浏览器不支持该方法，可以使用setTimeout来兼容

1、增加scrollTop的动画效果

利用定时器，每次将scrollTop的值减少50，直到值减至0，动画即告完成。


<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，动画完成。


<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，回滚停止。


<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的速度不合适，可以根据实际情况进行调整


<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实现回到页面顶部的五种写法(从实现到增强)的全部叙述，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对本站网站的支持！

JavaScript实现回到页面顶部的五种方法及动画增强详解

回到页面顶部的五种基础实现

回到顶部功能的视觉与动画增强

动画增强最终方案选择

实用工具推荐