vue 返回顶部

<div class="go-top">

      <button @click="goTop" ref="btn" title="回到顶部">

        <i class="iconfont icongoTop"></i>

      </button>

    </div>

let timer = null;

data() {

    return {

     isTop: true

    };

  },

  watch: {},

  mounted: function() {

    this.needScroll();

  },

  methods: {

    needScroll() {

      let clientHeight = document.documentElement.clientHeight;

      let obtn = this.$refs.btn;

      window.onscroll = function () {

      let osTop = document.documentElement.scrollTop || document.body.scrollTop

        console.log(osTop,clientHeight/3);

        if (osTop >= clientHeight/3) {

          obtn.style.display = 'block'

        } else {

          obtn.style.display = 'none'

        }

        if (!this.isTop) {

          clearInterval(this.timer)

        }

        this.isTop = false

      }

    },

    goTop() {

      timer = setInterval(function() {

        let osTop =

          document.documentElement.scrollTop || document.body.scrollTop;

        let ispeed = Math.floor(-osTop / 5);

        document.documentElement.scrollTop = document.body.scrollTop =

          osTop + ispeed;

        this.isTop = true;

        if (osTop === 0) {

          clearInterval(timer);

        }

      }, 30);

    }

  },


.go-top {

  width: 100%;

  button {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    position: fixed;

    right: 40px;

    bottom: 100px;

    border: none;

    display: none;

    i{

      font-size: 0.6rem;

    }

  }

}

//谨记一    检查父级高度是否有限制  
//谨记二   检查父级 overflow: hidden;是否有限制 

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.第一种方式:锚链接 优点:简单快速,没有兼容性问题 缺点: 视觉上不够直观,用户体验不太好 2.js的方式: ...
    love2013阅读 4,162评论 0 0
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 5,879评论 0 1
  • 100个常用的javascript函数 1、原生JavaScript实现字符串长度截取 复制代码代码如下: fun...
    老头子_d0ec阅读 2,806评论 0 0
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 6,143评论 0 2
  • 1 回到顶部es6版面向对象+原生JS实例 代码:HTML代码: <!DOCTYPE html> ...
    果木山阅读 1,300评论 0 0