Vue-返回顶部

1.backTop/index.vue

<template>
    <div class="backtop" v-if="btnFlag" @click="backTop">
        <img  class="go-top" src="../../assets/images/huidaodingbu.png" >
    </div>
</template>

<script>
    export default {
        name: "",
        data(){
            return{
                btnFlag:false
            }
        },
        mounted () {
          window.addEventListener('scroll', this.scrollToTop)
        },
        destroyed () {
          window.removeEventListener('scroll', this.scrollToTop)
        },   
        methods: {
          // 点击图片回到顶部方法，加计时器是为了过渡顺滑
          backTop () {
              const that = this
              let timer = setInterval(() => {
                let ispeed = Math.floor(-that.scrollTop / 5)
                document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
                if (that.scrollTop === 0) {
                  clearInterval(timer)
                }
              }, 16)
          },
         
          // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
          scrollToTop () {
            const that = this
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            that.scrollTop = scrollTop
            if (that.scrollTop > 500) {
              that.btnFlag = true
            } else {
              that.btnFlag = false
            }
          }
        }
    }
</script>

<style scoped>
    .backtop{
        width: 1rem;
        height: 1rem;
        background: #fff;
        border-radius: 50%;
        position: fixed;
        bottom: 1.8rem;
        right: .2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9998;
        border: .02rem solid #DEDEDE;
    }
    .backtop img{
        width: 50%;
        height: 50%;
    }
</style>

2.引入

import Backtop from './layouts/backTop'
Vue.component('Backtop',Backtop)

3.使用

<Backtop></Backtop>