标签：vue false isShowimg 顶部 回到 background offsetTop scrollTop document

<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 = 0
  },
  methods:{
    goTop() {
        // 回到顶部
      document.body.scrollTop = document.documentElement.scrollTop = 0
      this.isShowimg = false
    },
    handleScroll(e) {
      // 滚动操作监听
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // console.log(scrollTop)
      let offsetTop = 0
      try {
        offsetTop = document.querySelector('.main').offsetTop
      } catch (e) {
        offsetTop = 0
      }
      if (scrollTop > offsetTop) {
        // this.searchBarFixed = true
        // this.scrollStatus = {
        //   display: 'block',
        //   background: '#fff',
        //   h: this.statusBarHeight.h
        // }
        if (scrollTop > 500) {
          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:0;padding:0;
}
.main{
  width: 100%;
}
.content{
  width: 100%;
  height:60rem;
  background: #eee;
}
.red{
  height:30rem;
  background: #f00;
}
 .scollTop {
    position: fixed;
    bottom: 15rem;
    right: 3rem;
}
.scollTop img{
  width: 5rem;
  height: 5rem; 
}
</style>

注意图片需要自行进行引入

标签：vue,false,isShowimg,顶部,回到,background,offsetTop,scrollTop,document
来源： https://www.cnblogs.com/toughy/p/11806374.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。