VUE 锚点跳转 简洁版

402 阅读1分钟

头部锚点点击

<div class="item" :class="{ activd: activeBt === 0 }" id="goods" @click="goAnchor('togoods', 0)">商品</div>
      <div class="item" :class="{ activd: activeBt === 1 }" id="know" @click="goAnchor('toknow', 1)">须知</div>
      <div class="item" :class="{ activd: activeBt === 2 }" @click="goAnchor('todetail', 2)">详情</div>

锚点跳转的页面节点

 <div class="item-notes" id="toknow">

锚点方法

 goAnchor(selector, index) {
      // 锚点跳转
      this.activeBt = index
      document.getElementById(selector).scrollIntoView()
      console.log('锚点点击')
    },  

页面滚动监听

getScroll(event) {
      console.log('scrollHeight', event.target.scrollHeight)
      console.log('scrollTop', event.target.scrollTop)
      let scrollstart = event.target.scrollTop
      console.log(scrollstart, '999999999999999')
      if (scrollstart > 40) {
        this.visble = true
      } else {
        this.visble = false
      }