1、vue如何实现回到顶部
浏览网页的时候经常看到回到顶部这个功能，具体怎么实现呢？后面总结再说，怕你们等不及划走
废话不多说，直接上代码，复制代码就能直接运行
文件是vue文件，在router--index.js里添加路由才能运行`
index.js
PS：记得更改vue文件路径
{
path: '/top',
name: 'top',
component:() => import('@/views/back_top.vue') // 记得更改vue文件路径`
},
back_top.vue
<template>
<div class="back-top">
<van-icon
href="javascript:void(0);"
class="top"
name="back-top"
@click="backTop"
v-if="showBtn"
/>
<p style="text-align: center;">往下拉，出现回到顶部按钮</p>
<div v-for="s in 100" class="background-color">{{s}}</div>
</div>
</template>
<script>
import Vue from 'vue';
export default {
data() {
return {
showBtn: false, // 回到顶部，默认是false，就是隐藏起来
}
},
created() {
},
mounted() {
window.addEventListener("scroll", this.showbtn, true);
},
methods: {
// 回到顶部
showbtn() {
let that = this;
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
that.scrollTop = scrollTop;
if (scrollTop > 900) {
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);
},
}
};
</script>
<style>
.top {
height: 35px;
width: 37px;
position: fixed;
right: 4%;
bottom: 11%;
text-align: center;
line-height: 35px;
font-size: 25px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0px 1px 3px 1px #888888;
z-index: 999;
}
.background-color{
width: 100%;
height: 80px;
background-color: pink;
}
</style>
2、总结
这个回到顶部动能是使用scrollTop实现的
首先，我来简单介绍一下原理
1.根据网页的滚动高度，判断是否显示回到顶部功能按钮,这里我设置了900的高度
2.点击按钮时，触发回到顶部事件，如果要追求视觉效果的话，可以加入定时器。
3.加了定时器，就是实现点击之后它会有一个慢慢向上滑动的效果
3、具体实现效果如下
