vue3做导航栏锚点跳转

类似与a标签href="#id"的锚点跳转
注意点：vue的锚点不要有a标签 否则会一直刷新 导致锚点跳转出现点击第二次返回顶部的情况
html代码

<div class="rec-dhl">
      <ul>
        <li @click="ondhl(0,'xshk')" :class="['rec-dhl-a',isdhl == 0 ? 'rec-dhl-active' : '']">新上好课</li>
        <li @click="ondhl(1,'jzbx')" :class="['rec-dhl-a',isdhl == 1 ? 'rec-dhl-active' : '']">进站必学</li>
        <li @click="ondhl(2,'xxlx')" :class="['rec-dhl-a',isdhl == 2 ? 'rec-dhl-active' : '']">学习路线</li>
        <li @click="ondhl(3,'zl')" :class="['rec-dhl-a',isdhl == 3 ? 'rec-dhl-active' : '']">左耳专栏</li>
        <li @click="ondhl(4,'xspt')" :class="['rec-dhl-a',isdhl == 4? 'rec-dhl-active' : '']" style="border:0;">限时拼团</li>
      </ul>
    </div>

css代码

.rec-dhl{
    width: 120px;
    height: 260px;
    background-color: white;
    position: fixed;
    z-index: 9999;
    top: 35%;
    left: 0;
    box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .rec-dhl ul{
    padding: 0;
    margin: 0;
  }
  .rec-dhl ul li{
    list-style: none;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .rec-dhl-a{
    text-decoration: none;
    padding-bottom: 15px;
    font-size: 14px;
    color: #545C63;
    border-bottom: 1.5px solid rgb(0 0 0 / 8%);;
  }
  .rec-dhl ul li:hover{
    color: red;
    cursor: pointer;
  }
  .rec-dhl-active{
    color: red;
  }

js代码

export default {
    data(){
      return{
        isdhl: 0,//用于点击修改后文字颜色
      }
   }   
},
    methods:{
      ondhl(isvalue,id){
        this.isdhl = isvalue;
        let gd = document.getElementById(id);console.log(gd.offsetTop);
        window.scrollTo({top : gd.offsetTop - 100, behavior : 'smooth'});
      },
    }
  }

到这里就完成啦！！！