回到顶部

**html **

      <!-- 回到顶部 -->
      <div class="go_top" @click="goTop" :class="go_top_flag == true ? 'go_top_show' :''">
          <van-icon name="back-top" class="go_top_icon"></van-icon>
          <span class="go_top_word">回顶部</span>
      </div>

data数据

      // 回到顶部 屏幕滑动值判断
      go_top_flag: true,

函数

      mounted() {
            // 事件监听滚动条
            window.addEventListener('scroll', this.watchScroll)
        },
        methods: {
            // 回到顶部
            goTop() {
                document.body.scrollTop = document.documentElement.scrollTop = 0;
                this.showTop = false
            },
            // 回到顶部 屏幕滑动值判断
            watchScroll() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body
                    .scrollTop; // 当滚动超过 100 时,回到顶部显示 
                if (scrollTop > 100) {
                    this.go_top_flag = false
                } else {
                    this.go_top_flag = true
                }
            },
        }
posted @ 2020-11-25 10:36  JaneLifeVlog  阅读(139)  评论(0)    收藏  举报