vue+element|vue+element ui实现锚点定位 vue+elementui实现锚点定位

本文实例为大家分享了vue + element ui 实现锚点定位的具体代码，供大家参考，具体内容如下
vue

{{item.subjectName}}{{item.name}} 5"style="margin-top: 15px"size="small"@size-change="handleSizeChange($event,index)"@current-change="handleCurrentChange($event,index)":current-page="ruleForm.ageNum":page-sizes="[10, 30, 50, 100]":page-size="ruleForm.pageSize"layout="total, sizes, prev, pager, next":total="item.total">

// 滚动触发按钮高亮methods: {onScroll(e) {let scrollItems = document.querySelectorAll(".scroll-item"); console.log(scrollItems)console.log(e)for (let i = scrollItems.length - 1; i >= 0; i--) {// 判断滚动条滚动距离是否大于当前滚动项可滚动距离let judge =e.target.scrollTop >=scrollItems[i].offsetTop - scrollItems[0].offsetTop; if (judge) {console.log(i)this.activeStep = i.toString(); break; }}},jump(index) {console.log(index)let target = document.querySelector(".scroll_cls"); let scrollItems = document.querySelectorAll(".scroll-item"); // 判断滚动条是否滚动到底部if (target.scrollHeight <= target.scrollTop + target.clientHeight) {console.log(index)console.log(typeof index)this.activeStep = index; }let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop; // 锚点元素距离其offsetParent(这里是body)顶部的距离(待滚动的距离)console.log(total)let distance = document.querySelector(".scroll_cls").scrollTop; // 滚动条距离滚动区域顶部的距离console.log(distance)// let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // 滚动条距离滚动区域顶部的距离(滚动区域为窗口)// 滚动动画实现, 使用setTimeout的递归实现平滑滚动，将距离细分为50小段，10ms滚动一次// 计算每一小段的距离let step = total / 50; if (total > distance) {smoothDown(document.querySelector(".scroll_cls")); } else {let newTotal = distance - total; step = newTotal / 50; smoothUp(document.querySelector(".scroll_cls")); }// 参数element为滚动区域function smoothDown(element) {if (distance < total) {distance += step; element.scrollTop = distance; setTimeout(smoothDown.bind(this, element), 10); } else {element.scrollTop = total; }}// 参数element为滚动区域function smoothUp(element) {if (distance > total) {distance -= step; element.scrollTop = distance; setTimeout(smoothUp.bind(this, element), 10); } else {element.scrollTop = total; }}document.querySelectorAll('.scroll-item').forEach((item, index1) => {if (index === index1) {item.scrollIntoView({block: 'start',behavior: 'smooth'})}})},}, mounted() {this.$nextTick(() => {console.log(1)window.addEventListener('scroll', this.onScroll,true)})},

css