Vue in the implementation of the anchor point jump and scroll listening jump to the corresponding label method
<template> <div> <div class="list"> <ul> <li v-for="(item,index) in title_list" :key="index"> <span ref="spans" :style="{color: activeStep === index ? '#1987e1' : '#000000'}" @click="jump(index)"> {{item.title}} </span> </li> </ul> </div> <div class="result" @scroll="onScroll" > <div class="scroll-item"><span> first </span></div> <div class="scroll-item"><span> second </span></div> <div Class = "scroll - item" > < span > 3 < / span > < / div > < div class = "scroll - item" > < span > 4 < / span > < / div > < / div > < / div > < / template >Copy the code<script> export default { methods:{ jump(index) { var items = document.querySelectorAll(".scroll-item"); for (var i = 0; i < items.length; I ++) {if (index === I) {items[I]. ScrollIntoView ({block: "start",// default jump to top behavior: "smooth"// scroll speed}); } } }, onScroll(e) { let scrollItems = document.querySelectorAll(".scroll-item"); for (let i = scrollItems.length - 1; i >= 0; I --) {let judge = e.target.scrollTop >= scrollItems[I].offsetTop - scrollItems[0].offsetTop; if (judge) { this.activeStep = i; break; }}}}, the data () {return {activeStep: 0, title_list: [{title: 'first'}, {title: 'second'}, {title: '3'}, {title: '4'}, ] } } } </script>Copy the code<style> .list { width: 100%; height: 40px; margin-bottom: 20px; background: pink; } ul { width: 100%; height: 40px; line-height: 40px; list-style: none; } li { float: left; width: 20%; font-size: 30px; } li>span { cursor:pointer; } .result { width: 100%; height: 500px; overflow: scroll; } .scroll-item { width: 100%; height: 500px; margin-top:20px; background: yellow; } .scroll-item>span { font-size: 40px; } .scroll-item:first-child { margin-top: 0; } .scroll-item:last-child { height: 500px; </style> < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;"Copy the code