Vue项目中实现锚点定位功能

项目中有一个如下图的需求：点击左侧的某个菜单，右侧的内容直接链接到顶部。

HTML部分：把右侧每条菜单添加唯一的id标识

<div class="box">
  <ul class="left">
    <li v-for="(name, index) in data" :key="index" @click="selectMenu(index)">{{ name.name }}</li>
  </ul>
  <ul class="right" ref="right">
    <li v-for="(item, i) in data" :key="item + i" :id="'rightLi' + i">
      <div class="right_name">{{ item.name }}</div>
      <div class="right_content">{{ item.content }}</div>
    </li>
  </ul>
</div> 

JS部分：点击左侧菜单，获取右侧每一条菜单的高度相加，最后右侧的div直接滚动到对应的位置

  selectMenu(index) {
      let totalHeight = 0;
      if (index !== 0) {
        for(let i = 0; i < index; i += 1) {
          let dom = document.getElementById(`rightLi${index}`);
          let currentHeight = dom.offsetTop;
          totalHeight += currentHeight;
        }
      }
      const rightDom = this.$refs.right;
      rightDom.scrollTop = totalHeight;
    }

但是，上面的方法在项目里可以实现，当我自己写此demo的时候从第三个菜单开始滚动的高度明显不对，像下面这样不把高度相加就可以。我不知道为什么，有大佬看到的话可以告诉我吗？ /♪(･ω･)ﾉ

selectMenu(index) {
  let totalHeight = 0;
  if (index !== 0) {
    totalHeight = document.getElementById(`rightLi${index}`).offsetTop;
  }
  const rightDom = this.$refs.right;
  rightDom.scrollTop = totalHeight;
}

参考资料：https://www.cnblogs.com/wangxiaoer5200/p/11445540.html