Vue 錨點平滑滾動

代碼比較簡單,直接上代碼：

<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
        }
      }
    }

 

記錄進步。