美文网首页
js点击平滑滚动到指定高度

js点击平滑滚动到指定高度

作者: RickSimpleBook | 来源:发表于2019-10-10 15:20 被阅读0次
// 跳转到指定高度
scrollTo (num) {
      let speed = Math.floor((num-this.arriveTop) / 30)
      let timer = setInterval(() => {
        this.arriveTop += speed
        // 判定现在是否小于分出的大小
        if(Math.abs(this.arriveTop-num)<Math.abs(speed)){
          this.arriveTop = num
        }
        document.documentElement.scrollTop = document.body.scrollTop = this.arriveTop
        if (this.arriveTop === num) {
          clearInterval(timer)
        }
      }, 10)
    }
// 监听dom滚动事件
    onScroll () {
      this.arriveTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 识别关于我们,判定头部以及返回呕吐不按钮的显隐
      const info = document.querySelector('.info').offsetTop-40
      this.isActive=this.arriveTop>=info?true:false
      // 记录大事件和媒体报道的头部
      const offsetTop1 = document.querySelector('.section2').offsetTop-40,
            offsetTop2 = document.querySelector('.mtport').offsetTop-80
      switch(true){
        case this.arriveTop<offsetTop1:this.showIndex=0;break;
        case this.arriveTop<offsetTop2:this.showIndex=1;break;
        default:this.showIndex=2;
      }
    },

END...

相关文章

网友评论

      本文标题:js点击平滑滚动到指定高度

      本文链接:https://www.haomeiwen.com/subject/pmfryctx.html