src/components/backTop/index.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<template>
    <div 
        class="backTop" 
        :style="{'opacity':opacity}" 
        v-show="gotop"
        @mouseenter="enterBackTop" 
        @mouseout="outBackTop"
        @click="handleScrollTop"
         >
        <div class="back"></div>
    </div>
</template>


<script>
  export default {
      name:'backTop',
      data(){
          return {
            opacity:'.3',
            gotop:false,
            scrollHeight:100
          }
      },
      props:['ele'],
      created(){

      },
      mounted(){
          // 此处true需要加上，不加滚动事件可能绑定不成功
         window.addEventListener("scroll", this.handleScroll, true);
      },
      methods:{ 
        enterBackTop(){
            this.opacity = '1';
        },
        outBackTop(){
            this.opacity = '.3';
        },
        handleScroll(e) {
            let scrolltop = e.target.scrollTop;
            scrolltop > this.scrollHeight ? (this.gotop = true) : (this.gotop = false);
        },
        handleScrollTop() {
            this.$nextTick(()=>{    
                this.ele.scrollTop = 0;
            })
        }
    }
  }
</script>

<style lang="less" scoped>
     .backTop{
         position: fixed;
         right: 50px;
         bottom: 50px;
         z-index: 10;
         cursor: pointer;
         .back{