Javascript实现页面锚点滚动

<template>
  <div>
    <ul class="louplus-nav">
      <li
        v-for="(item, index) in nav"
        :key="index"
        :ref="item.key"
        @click="roll(item.key)"
      >
        <span>
          {{ item.value }}
        </span>
      </li>
      <li v-if="nav.length">
        <a href="#">
          <i class="fa fa-chevron-up" />
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nav: [],
      navLocate: [],
    }
  },
  mounted() {
    this.initNav()
    window.addEventListener('resize', this.initNavLocate)
    window.addEventListener('scroll', this.listenScroll)
  },
  methods: {
    roll(key) {
      if (process.client) {
        const rollArea = document.querySelector(`.louplus-${key}`)
        rollArea.scrollIntoView({
          block: 'start',
          behavior: 'instant',
        })
      }
    },
    initNav() {
      switch (this.$route.name) {
        case 'louplus-python':
          this.nav = this.$LouplusLandEnum.pythonNav
          break
        case 'louplus-ml':
          this.nav = this.$LouplusLandEnum.mlNav
          break
        case 'louplus-dm':
          this.nav = this.$LouplusLandEnum.dmNav
          break
        case 'louplus-bigdata':
          this.nav = this.$LouplusLandEnum.bigdataNav
          break
        case 'louplus-linux':
          this.nav = this.$LouplusLandEnum.linuxNav
      }
    },
    initNavLocate() {
      this.navLocate = []
      for (let i = 0; i < this.nav.length; i++) {
        let ele = document.querySelector(`.louplus-${this.nav[i].key}`)
        if (!ele) {
          return
        }
        let rect = ele.getBoundingClientRect()
        let li = this.nav[i].key
        this.$refs[li][0] && this.$refs[li][0].classList.remove('active')
        this.navLocate.push({
          li,
          rect,
        })
      }
    },
    listenScroll() {
      this.initNavLocate()
      for (let i = 0; i < this.navLocate.length; i++) {
        let item = this.navLocate[i]
        if (item.rect.bottom * item.rect.top < 0) {
          this.$refs[item.li][0] &&
            this.$refs[item.li][0].classList.add('active')
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.louplus-nav {
  position: fixed;
  top: calc(50% - 198px);
  left: 0;
  margin: 0;
  padding: 5px 0;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  list-style: none;
  background-color: #fff;
  box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.1);
  font-size: 12px;
  z-index: 9;
  li {
    margin: 3px 0;
    padding: 0 10px 0 7px;
    color: #999;
    cursor: pointer;
    border-left: 3px solid #fff;
    list-style: none;
    &:last-child {
      border: unset !important;
      a {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        text-align: center;
        border: unset;
        i {
          font-size: 16px;
        }
      }
    }
    &:hover {
      border-left: 3px solid #6ea6ed;
      color: #6ea6ed;
    }
    span {
      display: block;
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      text-align: center;
    }
  }
  li.active {
    border-left: 3px solid #6ea6ed;
    color: #6ea6ed;
  }
}
</style>