vue实现锚点

vue项目中有一个需要实现说明书的功能，左侧有目录，右侧是全部的文档，点击左侧目录，可以直接定位到文档相应位置，想到了html原生代码herf跳转

<a href="#m1"> 通过id获取锚点</a>

<div style="width:100%;height:1000px"></div>

<div style=" height:100px; width:100%; background: red; id="m1"> 通过id获取锚点</div>

vue可用anchor组件实现

<template>
  <div >
     <div class="title"><h1>Vue-Lov-Anchor</h1></div>
     <!-- <div class="anchor-horizontal">
        <div class="anchor">
          <lov-anchor targetid="anchorid" horizontal>
             <lov-anchor-link v-for="id in 5" :key="id" :href="'#box'+id" :title="'anchorlink'+id"></lov-anchor-link>
             <lov-anchor-link  href="#box6">
               <template slot="slot">
                <span style="color:red"> slot-link6</span>
               </template>
             </lov-anchor-link>
        </lov-anchor>
        </div>
        <div class="anchor">
          <lov-anchor targetid="anchorid" horizontal button>
             <lov-anchor-link v-for="id in 5" :key="id" :href="'#box'+id" :title="'anchorlink'+id"></lov-anchor-link>
             <lov-anchor-link  href="#box6">
               <template slot="slot">
                <span style="color:red"> slot-link6</span>
               </template>
             </lov-anchor-link>
        </lov-anchor>
        </div>
     </div> -->
     <div class="anchor-main">
       <div class="vue-lov-anchor">
         <div class="anchor">
           <lov-anchor targetid="anchorid">
             <lov-anchor-link v-for="id in 5" :key="id" :href="'#box'+id" :title="'anchorlink'+id"></lov-anchor-link>
             <lov-anchor-link  href="#box6">
               <template slot="slot">
                <span style="color:red"> slot-link6</span>
               </template>
             </lov-anchor-link>
           </lov-anchor>
         </div>
         <div class="anchor">
          
         </div>
         <!-- <div class="anchor">
           <lov-anchor targetid="anchorid" button>
             <lov-anchor-link v-for="id in 5" :key="id" :href="'#box'+id" :title="'anchorlink'+id"></lov-anchor-link>
             <lov-anchor-link  href="#box6">
               <template slot="slot">
                <span style="color:red"> slot-link6</span>
               </template>
             </lov-anchor-link>
           </lov-anchor>
         </div> -->
       </div>
       <div class="anchor-content" id="anchorid">
          <div v-for="box in 10" :key="box" class="box" :id="'box'+box">
            <h2>{{ `box${box}` }}</h2>
          </div>
       </div>
     </div>
  </div>
</template>
<script>
export default {
  name: "guide",
  methods: {
    mckick() {
    }
  }
};
</script>

<style lang="scss" scoped>
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.title{
  margin-bottom: 20px;
  text-align: center;
}
.anchor-horizontal{
  margin-bottom: 20px;
  .anchor:last-child{
    margin-top: 20px;
    padding-left: 20px;
  }
}
.anchor-main{
  flex-grow: 1;
  display: flex;
  .vue-lov-anchor{
    padding: 10px;
    .anchor{
      margin-bottom: 20px;
    }
  }
  .anchor-content{
   height: 600px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
   .box{
     height: 300px;
     background-color: #eee;
     text-align: center;
     line-height: 300px;
     &:nth-child(odd){
       background-color: #ccc;
     }
   }
  }
}
</style>

格式有一些被注释掉了，可按需修改