vue实现描点链接跳转

<!--
 * @Author: xiaohe
 * @LastEditors: xiaohe
-->
<template>
  <div class="score-preview-container">
    <div class="nav-button-box">
      <div
        class="nav-button"
        v-for="(item, index) in buttonArr"
        :key="index"
        :class="{ active: activeBtn == index }"
      >
        <span @click="goAnchor('anchor-' + index, index)">
          {{ item.name }}</span
        >
      </div>
    </div>
    <div id="app-root" ref="app_root" class="right-content">
      <div class="contentbox">
        <div class="content-page-box">
          <div id="anchor-0">1</div>
          <div id="anchor-1">2</div>
          <div id="anchor-2">3</div>
          <div id="anchor-3">4</div>
          <div id="anchor-4">5</div>
          <div id="anchor-5">6</div>
          <div id="anchor-6">7</div>
          <div id="anchor-7">8</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      buttonArr: [
        { name: "工商信息" },
        { name: "股东信息" },
        { name: "法律风险" },
        { name: "经营风险" },
        { name: "关联图谱" },
        { name: "舆情信息" },
        { name: "知识产权" },
        { name: "1111" },
      ],
      activeBtn: 0,
    };
  },
  mounted() {
    document.addEventListener("scroll", this.handleScroll, true);
  },
  destroyed() {
    document.removeEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    //锚点跳转
    goAnchor(selector, index) {
      this.activeBtn = index;
      let top = document.getElementById(selector).offsetTop - 50;
      this.$refs.app_root.scroll({ top: top, left: 0, behavior: "smooth" });
    },
    // 滚动监听描点链接
    handleScroll() {
      let scrollTop = document.getElementById("app-root").scrollTop; // 滚动条偏移量\
      //获取每个模块元素的高
      var objData = {};
      for (let i = 0, len = this.buttonArr.length; i <= len; i++) {
        let anchor = `anchor-${i}`;

        if (this.$el.querySelector("#" + anchor)) {
          objData["anchorOffset" + i] =
            this.$el.querySelector("#" + anchor).offsetTop - 50;
        }
      }
      //tabs当前下标
      for (var i = 0, len = this.buttonArr.length; i <= len; i++) {
        if (objData["anchorOffset" + i] > scrollTop && i > 0) {
          this.activeBtn = i - 1;
          break;
        } else if (objData["anchorOffset" + i] == undefined) {
          console.log(this.buttonArr.length);
          this.activeBtn = this.buttonArr.length - 1;
          break;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped >
.section {
  margin-bottom: 10px;
  background: #fff;
}
.score-preview-container {
  display: flex;
  flex-direction: column;
  height: 97%;
  margin: 9px 24px;
  position: relative;
  .nav-button-box {
    flex-shrink: 0;
    background: #fff;
    margin-top: 19px;
    width: 100px;
    position: absolute;
    .nav-button {
      width: 100%;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      cursor: pointer;
      line-height: 40px;
      text-align: center;
    }
    span:hover {
      color: #0964ff;
    }
    .active {
      color: #0964ff;
    }
  }
}

#app-root {
  display: block;
  overflow: auto;
  flex-grow: 1;
  width: 100%;
  height: 700px;
  text-align: center;
}
#app-root::-webkit-scrollbar {
  display: none !important;
}
#anchor-0 {
  background: brown;
  width: 100%;
  height: 300px;
}
#anchor-1 {
  background: blueviolet;
  width: 100%;
  height: 300px;
}
#anchor-2 {
  background: yellow;
  width: 100%;
  height: 300px;
}
#anchor-3 {
  background: blue;
  width: 100%;
  height: 300px;
}
#anchor-4 {
  background: red;
  width: 100%;
  height: 300px;
}
#anchor-5 {
  background: rgb(0, 174, 255);
  width: 100%;
  height: 3100px;
}
#anchor-6 {
  background: yellowgreen;
  width: 100%;
  height: 800px;
}
#anchor-7 {
  background: black;
  width: 100%;
  height: 800px;
}
.title_name {
  display: flex;
  font-size: 18px;
  padding: 30px 0 0 20px;
  color: rgba(0, 0, 0, 0.85);

  .link_title {
    width: 104px;
    display: inline-block;
  }
}

.quick_view {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  //width: 100%;
  padding-left: 25px;

  a {
    font-size: 12px;
    text-align: left;
    line-height: 25px;
    color: #6c7489;
    margin-right: 12px;
    cursor: default;

    span {
      display: inline-block;
      position: relative;
      top: 0;
      right: 0;
      height: 16px;
      padding: 0 5px;
      margin: 0 8px;
      font-size: 12px;
      line-height: 16px;
      text-align: center;
      background: #fff0eb;
      color: #1089ff;
      border-radius: 4px;
    }

    .gray {
      background: rgba(163, 171, 181, 0.2);
      color: #9ba7b6;
    }
  }
}
</style>