vue实现回到顶部

最新推荐文章于 2024-07-29 11:24:35 发布

Hell's Angel

最新推荐文章于 2024-07-29 11:24:35 发布

阅读量451

点赞数

分类专栏： vue 文章标签： vue

原文链接：https://blog.csdn.net/weixin_46174785/article/details/106865048

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

监听滚动条事件


  // created中调用调用this.listenerFunction方法
listenerFunction(e) {
      document.addEventListener("scroll", this.handleScroll, true);
    },
    beforeDestroy() {
      document.removeEventListener("scroll", this.listenerFunction);
    },
    
    handleScroll () {
        console.log(window.pageYOffset)
    }

返回顶部方法

代码如下

 <- 这里是一个图标，用来返回顶部的，v-show先隐藏-  -->  
        <div class="recurrence" v-show="isShow">
      <van-icon name="upgrade" @click="recurrence" />
    </div>

js:

 // 这个是监听滚动条的事件，判断，小于250 像素，显示，小于隐藏
handleScroll() {
      if (window.pageYOffset > 250) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    // 这个是一个计时器，当点击返回顶部的时候，3秒返回顶部
   recurrence() {
      $("html")
        .stop()
        .animate(
          {

            scrollTop: 0,
          },
          3000
        );
    },