Vue锚点滚动

220 阅读1分钟
<span @click="sectionChange(child)"></span>
sectionChange(child) {
  const scrollBox = document.querySelector('.report-detail-module') // 容器 
  let distance = scrollBox.scrollTop
  const curTag = document.querySelector('#' + child.sectionCode) // 节点tag 
  const offsetTop = curTag.offsetTop - 120 // 滚动距离 
  let step = offsetTop / 50
  if (offsetTop > distance) {
    smoothDown()
  }
  else {
    const newTotal = distance - offsetTop
    step = newTotal / 50
    smoothUp()
  }
  scrollBox.scrollTop = offsetTop
  function smoothDown() {
    if (distance < offsetTop) {
      distance += step
      scrollBox.scrollTop = distance
      setTimeout(smoothDown, 10)
    } else {
      scrollBox.scrollTop = offsetTop
    }
  } function smoothUp() {
    if (distance > offsetTop) {
      distance -= step
      scrollBox.scrollTop = distance
      setTimeout(smoothUp, 10)
    } else {
      scrollBox.scrollTop = offsetTop
    }
  }
}