Vue 页面跳转到指定位置
页面跳转页面scriptstyle进阶版：随着页面滚动变换导航菜单样式监听页面滚动方法销毁滚动页面跳转
页面
<template><div class="groups"id="groups"><!-- 导航 --><div class="group-list"><div v-for="item in groupList":key="item.id":class="`group-menu ${groupId==item.id ? 'select-menu' :''}`"><div class="name"@click="selectMenu(item)">{{item.name }}</div></div></div><!-- 内容 --><div v-for="(item,index) in groupList":key="index":id="item.key">内容信息</div></div></template>
script
<script>export default {name: 'groups',components: {pages,groupCard,},data() {return {groupList: [{name: '第一组', id: '-1', key: 'dyz', orderIndex: 0 },{name: '第二组', id: '1', key: 'dez', orderIndex: 10 },{name: '第三组', id: '2', key: 'dsz', orderIndex: 20 },],groupId: '-1',}},methods: {//选择方法selectMenu(item) {this.groupId = item.idconst returnEle = document.querySelector('#' + item.key)returnEle.scrollIntoView(true)},}</script>
style
<style scoped lang="less">.groups {height: 100vh;background-color: #f5f7f9;overflow: auto;}.group-card {margin-bottom: 20px;}.group-menu {padding: 12px 20px;cursor: pointer;border-bottom: 1px solid #e8eaec;display: flex;align-items: center;align-content: center;justify-content: space-between;.group-btn {display: flex;align-items: center;align-content: center;}}.select-menu {color: blue;}.group-list {padding: 10px;border: 1px solid #eee;border-radius: 10px;}
进阶版：随着页面滚动变换导航菜单样式
监听页面滚动方法
methods:{handleScroll() {//获取滚动时的高度let scrollTop = document.querySelector('#groups').scrollTop//判断当前页面高度this.groupList.map((item) => {//导航对应的div的位置let nowScroll = document.querySelector('#' + item.key).offsetTop//nowScroll-100是为了让滚动留有余地而不是一超过当前导航位置就变换样式if (nowScroll-100 <= scrollTop) {this.groupId = item.id}})},},mounted() {window.addEventListener('scroll', this.handleScroll, true)},
销毁滚动
destroyed() {document.removeEventListener('scroll', this.handleScroll)},
