效果图：

代码：

html代码：

 <div class="content-left"><el-tabs :tab-position="'left'" @tab-click="goAnchor"><el-tab-pane  v-for="(item,index) in anchorNameList"v-anchor-scroll:key="index":label="item.name":id="item.value"></el-tab-pane></el-tabs>
</div>

js:

 goAnchor(tab, event) {this.activeBtn = tab.index;document.querySelector(`.${tab.$attrs.id}`).scrollIntoView({behavior: 'smooth'});},

css：

  /deep/ .el-tabs {.el-tabs__item {font-family: PingFangSC-Regular;font-size: 16px;color: rgba(0,0,0,0.85);line-height: 40px;font-weight: 500;width: 150px;&:hover {background-image: xxxfont-family: xxx;font-size: 16px;line-height: 40px;font-weight: 600;color: #4cb4dd; //#4cb5dd}}.el-tabs__active-bar {background-image: xxx}.el-tabs__item.is-active {background-image: xxxfont-family: xxx;font-size: 16px;line-height: 40px;font-weight: 600;color: #4cb4dd; //#4cb5dd}}

参考原文：

vue 双向锚点实现 简易版（scrollIntoView）_vue锚点定位双向滚动插件-CSDN博客