vue 实现返回顶部

实现功能:当屏幕大于多少,展示出返回头部的按钮,当屏幕小于多少就隐藏返回头部的按钮;


展示返回头部

隐藏返回头部

代码展示

//第一步
mounted() {
      //获取当前的页面滚动事件,然后执行 this.showheader事件
      window.addEventListener('scroll', this.showheader);
    },
    destroyed() {
      window.removeEventListener('scroll', this.showheader);
    },
//第二步
showheader: function() {
        //当前屏幕等于多少执行的事件
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        this.scrollTop = scrollTop
        console.log(scrollTop)
        if (scrollTop > 541) {
          //当屏幕大于541的时候,就显示,小于则不显示
          this.show = true;
        } else {
          this.show = false;
        }
      }
//第三步
backTop: function() {
        //返回头部的动画
        const that = this
        let timer = setInterval(() => {
          let ispeed = Math.floor(-that.scrollTop / 7)
          document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
          if (that.scrollTop === 0) {
            clearInterval(timer)
          }
        }, 10)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,135评论 1 32
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,508评论 0 17
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,526评论 1 11
  • 庆祝《基本演绎法》第七季也是最终季将于(北京时间)2019年5月25日回归! 我曾经在网盘,用流量以平均100kb...
    不爱迟到阅读 707评论 2 4
  • 亲爱的: 这几天温度逐日上升,心里头颇不平静呀!昨天军体课中文大太阳下跑了三公里,那汗流的,简直不摆了,额头还在...
    Kohiu阅读 312评论 0 2