vue点击锚点平滑跳转

<template>
  <div class="help">
    <div class="help_header">大三大四</div>
    <div class="help_cont">
      <div class="help_cont_left">
        <div
          class="left_item"
          :class="[currents == 1 ? 'active' : '']"
          @click="toScroll(1)"
        >
          第一
        </div>
        <div
          class="left_item"
          :class="[currents == 2 ? 'active' : '']"
          @click="toScroll(2)"
        >
          第二
        </div>
        <div
          class="left_item"
          :class="[currents == 3 ? 'active' : '']"
          @click="toScroll(3)"
        >
          第三
        </div>
        <div
          class="left_item"
          :class="[currents == 4 ? 'active' : '']"
          @click="toScroll(4)"
        >
          第四
        </div>
        <div
          class="left_item"
          :class="[currents == 5 ? 'active' : '']"
          @click="toScroll(5)"
        >
          第五
        </div>
        <div
          class="left_item"
          :class="[currents == 6 ? 'active' : '']"
          @click="toScroll(6)"
        >
          第六
        </div>
      </div>
      <div class="help_cont_right">
        <div class="right_item">第一的内容</div>
        <div class="right_item">第二的内容</div>
        <div class="right_item">第三的内容</div>
        <div class="right_item">第四的内容</div>
        <div class="right_item">第五的内容</div>
        <div class="right_item">第六的内容</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Help',
  data () {
    return {
      currents: 1
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scroll, true)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scroll, true)
  },
  methods: {
    scroll () {
      let scroll_content = document.querySelector('.help_cont_right').scrollTop
      let arr = [
        [0, 600],
        [600, 1200],
        [1200, 1800],
        [1800, 2400],
        [2400, 3000],
        [3000]
      ]
      arr.map((ite, idx) => {
        if (scroll_content >= ite[0] && scroll_content < ite[1]) {
          this.currents = idx + 1
        }
      })
    },
    toScroll (index) {
      window.removeEventListener('scroll', this.scroll, true)
      setTimeout(() => {
        window.addEventListener('scroll', this.scroll, true)
      }, 600)
      this.currents = index
      // 用 class="right_item" 添加锚点
      let jump = document.querySelectorAll('.right_item')
      let scroll_content = document.querySelector('.help_cont_right')
      let total = jump[index - 1].offsetTop //这里的223是我头部header的高度
      let distance = scroll_content.scrollTop //获取需要滚动的距离
      console.log(distance)
      // 平滑滚动,时长500ms,每10ms一跳,共50跳
      let step = total / 50
      if (total > distance) {
        smoothDown()
      } else {
        let newTotal = distance - total
        step = newTotal / 50
        smoothUp()
      }
      function smoothDown () {
        if (distance < total) {
          distance += step
          scroll_content.scrollTop = distance
          setTimeout(smoothDown, 10)
        } else {
          scroll_content.scrollTop = total
        }
      }
      function smoothUp () {
        if (distance > total) {
          distance -= step
          scroll_content.scrollTop = distance
          setTimeout(smoothUp, 10)
        } else {
          scroll_content.scrollTop = total
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
$left_width: 299px;
.help {
  &_header {
    height: 30px;
    line-height: 30px;
    background: #fff;
    color: #000;
  }
  &_cont {
    width: 100%;
    min-height: 1000px;
    position: relative;
    &_left {
      width: $left_width;
      height: auto;
      border-right: 1px solid #000;
      position: absolute;
      left: 0;
      top: 0;
      .left_item {
        text-align: center;
        height: 100px;
        line-height: 100px;
        cursor: pointer;
        background: red;
        margin-bottom: 2px;
      }
      .active {
        background: #000;
      }
    }
    &_right {
      width: calc(100% - 299px);
      height: 100%;
      overflow-y: auto;
      position: absolute;
      left: $left_width;
      top: 0;
      .right_item {
        width: 100%;
        height: 600px;
        background: rgba(30, 88, 99, 0.4);
      }
    }
  }
}
</style>