vue实现锚点定位（多级动态菜单）

现在有一个需求是实现多级动态菜单点击跳转到相应位置，一般这种需求实现起来就是href+id的方式锚点定位

但是这种方式的滚动很生硬，故不采纳

我使用的方案是根据id，获取到当前元素距离body顶部的距离，判断此时滚动条需要滚动的距离，再通过

window.scrollTo方法实现平滑滚动到该区域

具体实现方案：

1，定义菜单和内容区域，内容区域的id使用菜单首字母缩写

2，引入js-pinyin插件，识别当前点击菜单的首字母缩写，与内容区域id对应

3，获取内容区域距离body顶部的距离，由于元素offsetTop的计算是根据当前元素相对于最近的定位父元素计算出来的，

所以不能直接用“元素.offsetTop”获取，需要定义一个方法计算当前元素距离body顶部的“真实”距离。

4，通过window.scrollTo并开启平滑滚动

demo：

<template>
  <div>
    <!-- 菜单 -->
    <div class="tabs">
      <span v-for="(item,index) in tabList"
            @click="toTabDetail(item)"
            :key="index">{
  { item.title }}</span>
    </div>
    <!-- 公司介绍 -->
    <div class="tab