vue 实现左侧导航栏,右侧锚点定位滚动到指定位置(超简单方法)

devtools/2024/9/23 7:23:52/

项目截图:

实现方法:

点击左侧菜单根据元素id定位到可视内容区域。

浏览器原生提供了一种方法scrollIntoView 。

通过scrollIntoView方法可以把元素滚动到可视区域内。

 

behavior: "smooth"是指定滚动方式为平滑效果。

 具体代码如下:

<div class="main"><div class="sidebar"><el-menu default-active="1" class="nav" @open="handleOpen" @close="handleClose"><el-submenu index="1"><template slot="title"><span>应用API</span></template><el-menu-item-group><el-menu-itemv-for="(item, index) in sections":key="item.name":index="index"@click="changeMenu(item)">{{ item.name }}</el-menu-item></el-menu-item-group></el-submenu></el-menu></div><div class="content"><div id="Start" class="content-item"><h2 class="name">快速开始</h2></div><div id="UpDate" class="content-item"><h2 class="name">检查更新</h2></div><div id="DownLoad" class="content-item"><h2 class="name">下载应用</h2></div><div id="History" class="content-item"><h2 class="name">更新历史</h2></div></div></div>
javascript">data(){return {sections: [{name: '快速开始',value: 'Start'},{name: '检查更新',value: 'UpDate'},{name: '下载应用',value: 'DownLoad'},{name: '更新历史',value: 'History'}]}
},
methods:{changeMenu(item) {const el = this.$el.querySelector(`#${item.value}`);if (el) {el.scrollIntoView({ behavior: 'smooth' });}}
}

css样式

.main {display: flex;.sidebar {width: 260px;.nav {height: 100%;}}.content {flex: 1;height: 78vh;overflow-y: auto;padding: 20px 30px;}.content-item {margin-bottom: 30px;&-p {padding: 2px 0;}}.content-item-name {font-weight: bold;padding: 30px 0 20px 0;}.name {margin-bottom: 10px;}
}


http://www.ppmy.cn/devtools/14458.html

相关文章

计算机网络——应用层协议(1)

在这篇文章初识网络中&#xff0c;我介绍了关于计算机网络的相关知识&#xff0c;以及在这两篇文章中Socket编程和Socket编程——tcp&#xff0c;介绍了使用套接字在两种协议下的网络间通信方式。本篇文章中我将会进一步介绍网络中网络协议的部分&#xff0c;而这将会从应用层开…

udp/tcp错误总结

udp tcp——多进程 tcp——多线程 tcp——线程池 tcp——守护进程 &#x1f386;udp  ✨pthread_create 错误总结  ✨LockGuard错误总结  ✨服务端需要写成多线程  ✨客户端也需要写成多线程  ✨多线程调试工具 &#x1f386;tcp  ✨tcp独有调试工具——telnet  ✨Threa…

芯科科技大大简化面向无电池物联网的能量采集产品的开发

芯科科技推出其迄今最高能量效率且支持能量采集功能的无线SoC 中国&#xff0c;北京 – 2024年4月22日 – 致力于以安全、智能无线连接技术&#xff0c;建立更互联世界的全球领导厂商Silicon Labs&#xff08;亦称“芯科科技”&#xff0c;NASDAQ&#xff1a;SLAB&#xff09;…

quasar框架切换Tab页使用<keep-alive>缓存

写法1 : 使用quasar的q-tabs组件使用方法 //布局样式根据需求自己设置 <template><div class"all-Tabs"><q-tabs v-model"activeTabName" update:model-value"selectedChange"><q-tabv-for"(item, index) in cardAr…

【1429】招生管理管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java 招生管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…

神经网络与深度学习(四)

目录 一、循环神经网络1.1 门控循环单元(GRU)1.2 长短期记忆网络(LSTM)1.3 深度循环神经网络1.4 双向循环神经网络 二、NLP2.1 序列模型2.2 数据预处理2.3 文本预处理2.4 文本嵌入 三、RNN模型3.1 RNN概要3.2 RNN模型3.3 RNN示例 一、循环神经网络 循环神经网络&#xff08;RN…

交换机与AI的连接:构建未来智能网络的关键路径

随着信息技术的飞速发展&#xff0c;交换机和人工智能&#xff08;AI&#xff09;这两大领域正逐渐融合&#xff0c;为我们的工作和生活带来前所未有的变革。本文将探讨交换机与人工智能之间的连接&#xff0c;以及这种连接如何影响未来网络的发展。一、交换机的基本概念 交换机…

FANUC机器人socket通讯硬件配置

一、添加机器人选配包 Fanuc机器人要进行socket通讯&#xff0c;需要有机器人通讯的选配包&#xff0c;1A05B-2600-R648 User Socket Msg&#xff0c;1A05B-2600-R632 KAREL&#xff0c;1A05B-2600-R566 KAREL Diagnostic&#xff0c;1A05B-2600-J971 KAREL Use Sprt FCTN。 二…