vue实现跳锚点

1.元素加上id，下面是循环中动态添加

:id="'product' + index"

也可以用vue ref实现

2.点击

// 跳转到对应锚点
document.getElementById('product' + index).scrollIntoView(true)

 

scrollIntoView(true) 跳到元素顶部
scrollIntoView(flase) 跳到元素底部

 

3. 纪录各个地方距页面顶部的高

getTopList () {
  let pageHeight = 0
  this.insuranceList.forEach((item, index) => {
    this.topList.push(document.getElementById('product' + index).offsetTop)
    pageHeight += document.getElementById('product' + index).offsetHeight
  })
  this.topList[this.topList.length - 1] = pageHeight - this.$refs.content.offsetHeight
},

 

4.滚动时切换到对应导航栏

onContentScroll (e) {
  let target = e.target || e.srcElement
  this.scrollTop = target.scrollTop
  if (target.scrollTop < this.topList[2]) {
    this.curNav = 0
  } else if (target.scrollTop >= this.topList[2] && target.scrollTop < this.topList[3]) {
    this.curNav = 2
  } else if (target.scrollTop >= this.topList[3] && target.scrollTop < this.topList[4]) {
    this.curNav = 3
  } else if (target.scrollTop >= this.topList[4]) {
    this.curNav = 4
  }
},