vue 点击回到顶部

YangHuan3

已于 2023-02-24 10:06:57 修改

阅读量274

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-02-24 09:58:16 首次发布

本文链接：https://blog.csdn.net/qianluo111/article/details/129194875

版权

vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

代码：

<div v-if="showBtn" class="toTop" @click="backTop">
    <img src="@/assets/images/icon/toTop.png" alt>
      顶部
 </div>

showbtn() {
      const scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop
      this.scrollTop = scrollTop
      if (scrollTop > 200) {
        this.showBtn = true
      } else {
        this.showBtn = false
      }
 },
backTop() {
      const timer = setInterval(function() {
        const osTop =
          document.documentElement.scrollTop || document.body.scrollTop
        const ispeed = Math.floor(-osTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop =
            osTop + ispeed
        this.isTop = true
        if (osTop === 0) {
          clearInterval(timer)
        }
      }, 3)
  },

图案实例展示：