<template>
<div>
<ul>
<li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li>
<li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li>
<li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li><li>1111111111</li>
</ul>
<a href="javascript:;" class="toTop" @click="backTop()" v-show="backToTop">
<i class="iconfont"></i>
</a>
</div>
</template>
<script>
export default {
data()
{
return{
backToTop:false
}
},
created()
{
window.addEventListener("scroll", this.scrollToTop);
},
methods:{
scrollToTop() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
let browserHeight = window.outerHeight;
if (scrollTop > browserHeight) {
this.backToTop = true
} else {
this.backToTop = false
}
},
//回到顶部
backTop() {
var back = setInterval(() => {
if (document.body.scrollTop || document.documentElement.scrollTop) {
document.body.scrollTop -= 100;
document.documentElement.scrollTop -= 100;
} else {
clearInterval(back);
}
});
},
},
destroyed() {
window.removeEventListener("scroll", this.scrollToTop);
}
}
</script>
<style lang="scss" scoped>
ul{
li{
line-height: 120px;
}
}
.toTop {
position: fixed;
bottom: 150px;
right: 30px;
z-index: 100;
width: 70px;
height: 70px;
border-radius: 50%;
border: 1px solid #999; /*no*/
text-align: center;
background-color: #fff;
i {
color: #999;
font-size: 58px;
vertical-align: middle;
font-weight: 500;
}
}
</style>
然后在需要调用的组件中直接调用使用就ok了不需要传递参数
这里的主要思路是:
1.监听滚动事件利用VUE写一个在控制台打印当前的scrollTop。首先,在 created 钩子中给window添加一个滚动滚动监听事件
2.监听回到顶部按钮距浏览器顶部的距离,滚动的距离如果大于浏览器高度时,设置 toTop 为true,否则就是false
3.点击回到顶部按钮,让距离逐渐减少,形成上划的效果
4.离开该页面需要移除这个监听的事件
注意:因为涉及到滚动,所以页面的内容肯定是要超出可视区的,这里我使用ui li 随便写了一些数据,设置样式,让其超出可视区部分实现滚动
然后在需要的组件直接调用就好了,样式呢可自行设置,为了美观咱们可以使用一些字体库等~