html代码：
<div @scroll="scrollEvent">/****目录部分***/<ul class="titless"><li v-for="(titleItems,index) in titleList" :key="index" :class="titleOnIndex === index ? 'active' : ''" @click="jump(index)">{{ titleItems.title }}</li></ul>/**** 内容部分 ****/<div class="overflow"><div v-for="(item0,index1) in dest1" :key="index1" class="slideShow d_jump"><div class="logical-slide-show"><div class="titles">{{ item0.name }}</div><ul class="yyc-li0-list yyc-li1-list"><li><img src="./img/iconImg6.png"><span class="zb-div-span-auto-line">{{ item0.label }}</span></li></ul></div></div></div></div>
数据：
titleOnIndex： 0，titleList: [{title: '业务应用BIZ'},{title: '贴源区ODS'},{title: '管理支撑SUP'},{title: '主题区DW'},{title: '专题区ADS'},{title: '前置交换区 PRE'},{title: '公共基础区 PUB'},{title: '地理空间区 GEO'},{title: '元数据META'}]
css代码：
目录部分.titless {width: 6.5rem;position: fixed;left: 1rem;top: 14.2%;bottom: 0.75rem;text-align: center;background: url(./img/iconImg0.png) top center no-repeat;background-size: 100% 100%;z-index: 99999999;li{height: 1.95rem;line-height: 1.95rem;padding: 0 .25rem;font-size: 0.55rem /* 22/40 */;font-family: Source Han Sans CN;font-weight: bold;color: #ffffff;cursor: pointer;}.active{background: #205373;cursor: pointer;color:#00ffff;}}
锚点定位方法：
/* 监听滚动(结合前面的@scroll) */scrollEvent(e) {let scrollItems = document.querySelectorAll('.d_jump')for (let i = scrollItems.length - 1; i >= 0; i--) {// 判断滚动条滚动距离是否大于当前滚动项可滚动距离let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTopif (judge) {this.catalogCur = ibreak}}// 滚动条触底了if (e.srcElement.scrollTop + e.srcElement.offsetHeight === e.srcElement.scrollHeight) {this.catalogCur = this.articleName.length - 1}console.log(e.srcElement.scrollTop)// 滚动条高度console.log(e.srcElement.offsetHeight)// 屏幕高度console.log(e.srcElement.scrollHeight)// 内容高度// '下拉获取更多'的功能(还有10像素就触发)：滚动的像素+容器的高度>可滚动的总高度-10像素},/* 目录点击定位效果：有兼容问题，借鉴了很多其他方法却一直不成功，无奈之后使用了scrollIntoView */jump (index) {debuggerthis.titleOnIndex = indexlet jump = document.querySelectorAll('.d_jump')jump[index].scrollIntoView({block: 'start', behavior: 'smooth' })}
效果如下：
