效果圖：

代碼：

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博客