我们在浏览网页的时候经常看到回到顶部这个功能，这个功能也比较简单，今天我就介绍一下这个功能如何实现。
使用scrollTop实现
首先，我来简单介绍一下原理
1.根据网页的滚动高度，判断是否显示回到顶部功能按钮
2.点击按钮时，触发回到顶部事件，如果要追求视觉效果的话，可以加入定时器。
下面简单介绍下代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
#app>div{
width: 100px;
height: 100px;
background: pink;
}
button{
position: fixed;
right: 100px;
bottom:100px;
}
</style>
<body>
<div id="app">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<button @click="backTop" v-if="showBtn">回到顶部</button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return { showBtn: false }
},
methods: {
// 展示回到顶部按钮
showbtn() {
let that = this;
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
that.scrollTop = scrollTop;
if (scrollTop > 750) {
this.showBtn = true;
} else {
this.showBtn = false;
}
},
/*回到顶部实现过程注解：
1.获取当前页面距离顶部的距离
2.计算出每次向上移动的距离，用负的滚动距离除以5，因为滚动的距离是一个正数，想向上移动就是一个减法
3.用当前距离加上计算出的距离，然后赋值给当前距离，就可以达到向上移动的效果
4.最后在移动到顶部的时候，清除定时器*/
backTop() {
var timer = setInterval(function () {
let osTop =
document.documentElement.scrollTop || document.body.scrollTop;
let ispeed = Math.floor(-osTop / 5);
document.documentElement.scrollTop = document.body.scrollTop =
osTop + ispeed;
this.isTop = true;
if (osTop === 0) {
clearInterval(timer);
}
}, 30);
},
},
mounted() {
window.addEventListener("scroll", this.showbtn, true);
},
})
</script>
</html>
