Record a vUE side navigation component that can be linked to content without further ado:

HTML:  <template> <div class="app"> <div class="nav" id="box_action_translateYOut"> <div class="nav_box" v-for="(item, index) in stepList" :key="index" :class="{ navActive: currentIndex === index }"> <div v-show="currentIndex ! == index"></div> <svg-icon v-show="currentIndex === index" class-name="fswx-icon" icon-class="fswx-selected" /> <a :href="'#' + item.value" @click="goStep(item.value)">{{ item.name }}</a> </div> <div class="fswx-switch-btn"> <a :href="'#' + id" @click="goLastStep"> <svg-icon class-name="fswx-icon" icon-class="fswx-top-switch" /> </a> <a :href="'#' + id" @click="goNestStep"> <svg-icon class-name="fswx-icon" icon-class="fswx-bottom-switch" /> </a> </div> </div> </div> </template>Copy the code
js: export default { props: { stepList: { type: Array, default: () => { return [] } } }, data() { return { currentIndex: 0, heightArr: [], id: 0, stopScroll: false } }, methods: Const wrapDom = document.getelementById ('box_action_translateYOut') const aDom =  wrapDom.getElementsByTagName('a') const len = aDom.length - 2 const wrap = this.$parent.$refs.wrap const parentRefs = this.$parent.$parent.$refs const diff = parentRefs.scrollOne.offsetTop for (const key in parentRefs) { if (Object.hasOwnProperty.call(parentRefs, key)) { const element = parentRefs[key] if (element && element.offsetTop) { this.heightArr.push(element.offsetTop - Diff)}}} // wrap visual height const domHeight = wrap.clientheight // Wrap scrollHeight = wrap.scrollheight window.addEventListener( 'scroll', () => { const scrollTop = wrap.scrollTop for (let i = 0; i < len; i++) { if (scrollTop > this.heightArr[i] && scrollTop < this.heightArr[i + 1] && i < len - 1) { this.currentIndex = i } Else if (I === len-1) {// Last row if (scrollTop > this.heightarr [I]) {this.currentIndex = I}}} // Bottom row if (scrollTop + domHeight === scrollHeight) { this.currentIndex = len - 1 } if (this.stopScroll) { this.currentIndex = this.id - 1 } this.stopScroll = false }, true ) }, goStep(id) { this.id = id this.stopScroll = true this.currentIndex = id - 1 }, goLastStep() { if (this.currentIndex > 0) { this.id = this.currentIndex this.currentIndex = this.currentIndex - 1 this.stopScroll = true } }, goNestStep() { if (this.id < 9) { this.id = this.currentIndex + 2 this.currentIndex = this.currentIndex + 1 this.stopScroll = true } } }, mounted() { this.wrapListener() } }Copy the code
css: .app { .nav { width: 142px; position: fixed; bottom: 4%; right: 50px; z-index: 99; .nav_box { display: flex; margin-bottom: 15px; position: relative; cursor: pointer; div { width: 6px; height: 6px; border-radius: 6px; background-color: #000; margin-right: 9px; margin-top: 3px; } a { display: inline-block; width: 126px; font-size: 16px; color: #303133; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .nav_box::after { content: ''; width: 1px; height: 25px; background-color: #d8d8d8; position: absolute; left: 2%; bottom: 85%; } .nav_box:nth-child(1)::after { content: ''; width: 0; height: 0; background-color: #d8d8d8; position: absolute; left: 4%; bottom: 10%; } // Click the navigation highlight style. NavActive {display: flex; margin-bottom: 15px; cursor: pointer; .fswx-icon { font-size: 10px; margin-right: 6px; margin-top: 2px; margin-left: -2px; z-index: 9; @include theme_color; } a { display: inline-block; width: 126px; font-size: 16px; @include theme_color; // color: #2d54b8; text-decoration: none; font-weight: 700; } } .fswx-switch-btn { position: absolute; top: 50%; right: -24px; margin-top: -28px; border: 1px solid #e4e4e4; border-radius: 9px; a:nth-child(1) { border-bottom: 1px solid #e4e4e4; } .fswx-icon { font-size: 9px; padding: 3px; } a { cursor: pointer; text-decoration: none; display: block; color: #606266; }}}}Copy the code

Effect: