向上置顶

1. html

<div class="fix-dom">
  <div v-show="showTop" class="fix-dom-in" @click="goTopClick">
    置顶
  </div>
</div>

2. js

data(){
  return {
    showTop:false,
    scrollTop:0
  }
},
mounted(){
  window.addEventListener('scroll',this.scrollToTop)
},
methods:{
  goTopClick() {
    let timer=setInterval(()=>{
      let ispeed=Math.floor(-this.scrollTop/5)
      document.documentElement.scrollTop=document.body.scrollTop=this.scrollTop+ispeed
      this.scrollTop==0&&clearInterval(timer)
    },17)
  },
  scrollToTop(){
    this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    this.showTop=this.scrollTop>300?true:false
  }
},
destroyed(){
  window.removeEventListener('scroll',this.scrollToTop)
}

3. css

.fix-dom{
  position: fixed;
  right: 40px;
  bottom: 160px;
  z-index: 5;
}
.fix-dom-in{
  width: 40px;
  height: 40px;
  color: #409eff;
  background-color: rgb(242, 245, 246);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0  0 6px rgb(0 0 0 / 12%);
  border-radius: 3px;
}