Vue implements anchor positioning function

<template>
  <div class="anchor-point">
    <!-- Scrolling area -->
    <div class="scroll-content" @scroll="onScroll">
      <div class="scroll-item" style="height: 500px;background: #3a8ee6;">One ​​layer</div>
      <div class="scroll-item" style="height: 500px;background: red;">Second floor</div>
      <div class="scroll-item" style="height: 500px;background: #42b983">Three layers</div>
      <div class="scroll-item" style="height: 1000px;background: yellow;">Four layers</div>
    </div>
    <!-- Button -->
    <div class="operation-btn">
      <div v-for="(item, index) in ['First floor','Second floor','Third floor','Fourth floor']" :key="index" @click="jump(index)"
           :style="{background: activeStep === index ? '#eeeeee' : '#ffffff'}">{{item}}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .anchor-point {
    flex-basis: 100%;
    display: flex;
    overflow: hidden;
    .scroll-content {
      height: 100%;
      width: 90%;
      overflow: scroll;
    }
    .operation-btn {
      width: 10%;
      height: 100%;
    }
  }
</style>

//Scroll trigger button highlight onScroll (e) {
  let scrollItems = document.querySelectorAll('.scroll-item')
  for (let i = scrollItems.length - 1; i >= 0; i--) {
    //Judge whether the scroll bar scroll distance is greater than the scrollable distance of the current scroll item let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
    if (judge) {
      this.activeStep = i
      break
    }
  }
},

// Click to switch anchor point jump (index) {
 let target = document.querySelector('.scroll-content')
 let scrollItems = document.querySelectorAll('.scroll-item')
 // Determine whether the scroll bar has scrolled to the bottom if (target.scrollHeight <= target.scrollTop + target.clientHeight) {
   this.activeStep = index
 }
 let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // The distance between the anchor element and the top of its offsetParent (here is body) (the distance to be scrolled)
 let distance = document.querySelector('.scroll-content').scrollTop // The distance between the scroll bar and the top of the scroll area // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // The distance between the scroll bar and the top of the scroll area (the scroll area is the window)
 // Scrolling animation implementation, use setTimeout recursion to achieve smooth scrolling, subdivide the distance into 50 small segments, and scroll once every 10ms // Calculate the distance of each small segment let step = total / 50
 if (total > distance) {
   smoothDown(document.querySelector('.scroll-content'))
 } else {
   let newTotal = distance - total
   step = newTotal / 50
   smoothUp(document.querySelector('.scroll-content'))
 }

 // Parameter element is the scrolling area function smoothDown (element) {
   if (distance < total) {
     distance += step
     element.scrollTop = distance
     setTimeout(smoothDown.bind(this, element), 10)
   } else {
     element.scrollTop = total
   }
 }

 // Parameter element is the scrolling area function smoothUp (element) {
   if (distance > total) {
     distance -= step
     element.scrollTop = distance
     setTimeout(smoothUp.bind(this, element), 10)
   } else {
     element.scrollTop = total
   }
 }

 // document.querySelectorAll('.scroll-item').forEach((item, index1) => {
 // if (index === index1) {
 // item.scrollIntoView({
 // block: 'start',
 // behavior: 'smooth'
 // })
 // }
 // })
}