vue3实现导航栏绑定内容锚点+滚动动画

目前用的两种方法实现：
第一种：原生js实现
注意：因为移动端可滚动区域可能会嵌套在其他架子下，所以需要用到ref获取滚动区域，
正常获取scrollTop：前者基于html，后者基于body
scrollTop = document.documentElement.scrollTop || document.body.scrollTop
获取指定滚动区域（想要谁滚动就指定谁）
scrollTop = commissionDataMainRef.value.scrollTop
首先div上声明ref

其次，在setup里
const commissionDataMainRef = ref();
然后return 出去
return { commissionDataMainRef }
最后就可以在js中用
commissionDataMainRef.value.scrollTop

代码如下：

定义导航栏

<ul class="navs">
      <li v-for="(item, index) in indexList" :key="item" :class="{active: state.active===index}" @click="scrollTo(index)" >
        {
   {
   item}}
      </li>
</ul>
 indexList.value = ['排名', '极速', '非极速', '退款', '积分']

声明方法

setup(props, {
     attrs, slots, emit, expose }) {
   
    const state = reactive({
   
      active: 0,
      currentActive: null,
      scrollTopLength: 0,
      timer: null
    })
    const commissionDataMainRef = ref()
    let indexList =