<template>

  <div class="main">

    <div class="content">灰色部分是内容部分</div>

    <div class="red">红色部分是内容部分</div>

    <div class="scollTop" id="imgscoll" v-show="isShowimg === true">

      <img src="@/assets/dingbu@3x.png" alt @click="goTop">

    </div>

  </div>

</template>

<script>

export default {

  data(){

    return{

      isShowimg: false,

    }

  },

  mounted(){

    window.addEventListener('scroll', this.handleScroll)

  },

  destroyed() {

    document.removeEventListener('scroll', this.handleScroll)

    document.body.scrollTop = document.documentElement.scrollTop =

  },

  methods:{

    goTop() {

        // 回到顶部

      document.body.scrollTop = document.documentElement.scrollTop =

      this.isShowimg = false

    },

    handleScroll(e) {

      // 滚动操作监听

      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop

      // console.log(scrollTop)

      let offsetTop =

      try {

        offsetTop = document.querySelector('.main').offsetTop

      } catch (e) {

        offsetTop =

      }

      if (scrollTop > offsetTop) {

        // this.searchBarFixed = true

        // this.scrollStatus = {

        //   display: 'block',

        //   background: '#fff',

        //   h: this.statusBarHeight.h

        // }

        if (scrollTop > ) {

          this.isShowimg = true

        } else {

          this.isShowimg = false

        }

      } else {

        // this.searchBarFixed = false

        this.isShowimg = false

        // this.scrollStatus = {

        //   display: 'none',

        //   background: 'transparent',

        //   h: 0

        // }

      }

    }

  }

}

</script>

<style>

*{

  margin:;padding:;

}

.main{

  width: %;

}

.content{

  width: %;

  height:60rem;

  background: #eee;

}

.red{

  height:30rem;

  background: #f00;

}

 .scollTop {

    position: fixed;

    bottom: 15rem;

    right: 3rem;

}

.scollTop img{

  width: 5rem;

  height: 5rem;

}

</style>