效果

步骤

1-标签结构

动态绑定样式style，监听点击事件，后续控制opacity透明度。和滚动距离

<div class="toTop" :style="dynamicStyles" @click="toTop"><!--<i class="fa fa-arrow-up"></i>-->↑</div>

2-js代码

实例及组件挂载后监听

回调判断滚动高度是否大于视口高度的1/2如果是，则设置动态样式的opacity为1，不是则隐藏为0

点击按钮触发置顶，scrollTo(0,0)滚动到 x y都为0的位置，也就是左上角

 data(){return{dynamicStyles:{opacity:0}}},mounted() {// 当所有组件都挂载好后，监听窗口的滚动事件，触发回调window.addEventListener('scroll',this.handleWindowScroll)},beforeUnmount() {window.removeEventListener('scroll', this.handleWindowScroll);},methods:{handleWindowScroll(){if (window.scrollY>document.documentElement.clientHeight/2){this.dynamicStyles.opacity=1}else{this.dynamicStyles.opacity=0}},toTop(){scrollTo(0,0)}}

3-css样式

* {//滚动行为-流畅scroll-behavior: smooth;
}
.toTop{//透明度变化总时间，变化速度模式为缓动transition: 0.3s ease;position: fixed;bottom: 80px;right: 100px;display: block;background: #ffffff;width: 50px;height: 50px;text-align: center;line-height: 50px;border-radius: 100%;cursor: pointer;
}