vue里的锚点定位

例子代码

<template>
  <div class="hello">
    <div class="all" >
      <div class="left">
        <el-timeline>
          <el-timeline-item v-for="(fatherItem, index) in allData" :key="index">
            <a @click="jump(index)">
              {{ fatherItem.moduleName }}
            </a>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="right" ref="helloData">
        <div v-for="(fatherItem, index) in allData" :key="'a' + index">
          <div class="firsttitle">{{ fatherItem.moduleName }}</div>
          <div class="zhan-wei"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      allData: [
        {
          moduleName: "家庭成员0",
        },
        {
          moduleName: "家庭成员1",
        },
        {
          moduleName: "家庭成员2",
        },
        {
          moduleName: "家庭成员3",
        },
        {
          moduleName: "家庭成员4",
        },
        {
          moduleName: "家庭成员5",
        },
        {
          moduleName: "家庭成员6",
        },
        {
          moduleName: "家庭成员7",
        },
        {
          moduleName: "家庭成员8",
        },
        {
          moduleName: "家庭成员9",
        },
        {
          moduleName: "家庭成员10",
        },
      ],
    };
  },
  methods: {
    jump(index) {
      let jump = document.querySelectorAll(".firsttitle");
      let topUp = jump[index].offsetTop;
      window.scrollTo(0, topUp);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.all {
  display: flex;
}
.left {
  width: 300px;
  position:fixed;
}
.right {
  flex: 1;
  padding-left: 300px;
}
.zhan-wei {
  height: 300px;
  background-color: pink;
  border: 2px solid #ddd;
}
</style>