vue返回顶部组件

返回顶部

<template>
 <div class="topnav" v-if="isShow">
   <div @click="top"><i class="iconfont icon-zhiding"></i></div>
 </div>
</template>

<script>
export default {
 name: 'topnav',
 data() {
   return {
     isShow: false,
   }
 },
 components: {},
 created() {},
 mounted() {
   window.addEventListener('scroll', this.scrollToTop)//获取距离顶部距离
 },
 destroyed() {
   window.removeEventListener('scroll', this.scrollToTop)//销毁距离（不然会报错）
 },
 methods: {
   scrollToTop() {
     var scrollTop = //距离顶部的距离
       window.pageYOffset ||
       document.documentElement.scrollTop ||
       document.body.scrollTop
     if (scrollTop > 300) { // 大于300显示隐藏
       this.isShow = true
     } else {
       this.isShow = false
     }
   },
   top() {
     setTimeout(() => {
       let ispeed = Math.floor(-this.scrollTop / 5)
       document.documentElement.scrollTop = document.body.scrollTop =
         this.scrollTop + ispeed
     }, 16)
   },
 },
}
</script>

<style lang="less">
.topnav {
 width: 44px;
 height: 44px;
 position: fixed;
 top: 560px;
 right: 54px;
 text-align: center;
 color: #ffffff;
 padding-top: 8px;
 background-color: #b21315;
 i {
   font-size: 30px;
 }
}
</style>

使用

 <topnav />
import topnav from '../components/topnav.vue'
components: {
    topnav,
  },