vue 实现滚动类似anchor组件

html+css

<template>
      <div class="wrap" :style="style">
        <div>
          <div
            v-for="(item,i) in list"
            :key="i"
            @click="autoScroll(item.top, item.id)"
            :class="{item: item,active: item.active}"
          >
            {
   {
   item.title}}
          </div>
        </div>
      </div>
    </template>
    <script>
      export default {
   
        data() {
   
          return {
   
            style: '',
            list: [
              {
   
                title: 'demo1',
                active: true,
                id: 'title-1',
              },
              {
   
                title: 'demo2',
                active: false,
                id: 'title-2',
              },
              {
   
                title: 'demo3',
                active: false,
                id: 'title-3',
              },
            ],
          }
        },
        // 将需要的跳转的组件引入
        computed: {
   
          ...mapState('merchant/register', ['demo1', 'demo2', 'demo3']),
        },
<style>
    .wrap {
   
      position: fixed;
      top: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .item {
   
      position: relative;
      padding: 14px 0px 14px 24px;
      min-width: 130px;
      font