如何实现点击目录跳转到指定位置？【vue】
需求：实现目录点击跳转到指定位置，点击后直接定位到指定模块
效果：
实现方法：
（1）a标签跳转
普通使用：
<!DOCTYPE html>
<html><head><title>a-Demo</title></head><style>/* bar超出屏幕，显示在屏幕最上方 */.bar {position:fixed;top:0;bottom:0}.bar a {padding: 20px;}div.content div {padding-top: 20px;height: 1000px;scroll-behavior: smooth;}/* 加上这一句，实现平滑滚动效果 */html, body {scroll-behavior:smooth;}</style><body><div class="bar"><a href="#div1">跳转1</a><a href="#div2">跳转2</a><a href="#div3">跳转3</a></div><div class="content"><div id="div1">这是div1</div><div id="div2">这是div2</div><div id="div3">这是div3</div></div></body>
</html>
<script></script>
（2）scrollIntoView跳转
语法：
element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; //布尔参数
element.scrollIntoView（scrollIntoViewOptions）; //对象参数
在vue3中应用（结合上面页面中的案例）：
绑定a标签，href地址填入对应id名称，增加点击事件
<div v-for="(item,index) in navList" :key="index"><a :href="'#' + index" class="mulu-item" :class="index==navIndex?'active':''" @click.prevent="clickNav(index,item)" ><img :src="item.icon" alt="">{{item.title}}</a></div><div class="link" v-for="(content,index) in navList" :key="content.name"><h2 :id="index">{{content.title}}</h2>........</div>const clickNav = (index, item) => {navIndex.value = indexconst element = document.getElementById(index);element.scrollIntoView({ behavior: 'smooth' });}（3）v-scrollspy插件
在 Vue 中，你可以使用 v-scrollspy 指令来设置目录的锚点。首先，你需要安装 vue-scrollspy
import VueScrollspy from 'vue-scrollspy';在vue组件中使用：
<div class="mulu-item" :class="index==navIndex?'active':''" @click="clickNav(index,item)" ><img :src="item.icon" alt=""><a :href="'#' + index">{{item.title}}</a></div><div class="link" v-for="(content,index) in navList" :key="content.name"><h2 :id="index">{{content.title}}</h2>........</div>import VueScrollspy from 'vue-scrollspy';methods: {clickNav(index, item) {this.navIndex = index;this.$scrollspy.scrollTo(index);}}相关文章：
如何实现点击目录跳转到指定位置？【vue】
需求：实现目录点击跳转到指定位置，点击后直接定位到指定模块 效果： 实现方法： （1）a标签跳转 普通使用： <!DOCTYPE html> <html><head><title>a-Demo</title>&l…...
SQL 通配符
SQL 通配符 在SQL中，通配符是一种特殊字符，用于在LIKE子句中搜索数据。它们主要用于模式匹配，允许你搜索符合特定模式的值。SQL中的通配符通常用于SELECT、UPDATE和DELETE语句中，以增加查询的灵活性。本文将详细介绍SQL中常用的通…...
ubuntu显示管理器_显示导航栏
ubuntu文件管理器_显示导航栏 一、原始状态： 二、显示导航栏状态： 三、原始状态--->导航栏状态: 1、打开dconf编辑器，直接在搜索栏搜索 dconf-editor ------如果没有安装，直接按流程安装即可。 2、进入目录：org …...
黑芝麻嵌入式面试题及参考答案
请详细描述二叉树的深度优先搜索（dfs）流程。 深度优先搜索是一种用于遍历二叉树的重要算法，主要有先序遍历、中序遍历和后序遍历三种方式。 先序遍历的流程是，首先访问根节点，然后递归地遍历左子树，最后递归地遍历右子树。这就好比是在探索一个家族树，先拜访家族中的长辈…...
使用 PyTorch-BigGraph 构建和部署大规模图嵌入的完整教程
当涉及到图数据时，复杂性是不可避免的。无论是社交网络中的庞大互联关系、像 Freebase 这样的知识图谱，还是推荐引擎中海量的数据量，处理如此规模的图数据都充满挑战。 尤其是当目标是生成能够准确捕捉这些关系本质的嵌入表示时，…...
系统性能优化方法论详解：从理解系统到验证迭代
在当今的企业级和云计算环境中，系统性能优化已成为提升竞争力的关键因素。本文将对系统优化的步骤进行深入解析，帮助读者系统化地进行性能优化，从而显著提升系统的整体表现。 流程概述: 系统性能优化的流程可以分为以下几个关键步骤&#x…...
使用Tengine 对负载均衡进行状态检查（day028）
本篇文章对于在服务器已经安装了nginx,但却希望使用Tengine 的状态检查或其他功能时使用，不需要卸载服务器上的nginx,思路是使用干净服务器（未安装过nginx）通过编译安装Tengine，通过对./configure的配置，保证安装Tengi…...
网站推广实战案例：杭州翔胜科技有限公司如何为中小企业打开市场大门
以下是以杭州翔胜科技有限公司为例，解析其如何通过网站推广为中小企业打开市场大门的实战案例： 一、一站式网站推广方案 杭州翔胜科技有限公司提供一站式网站推广方案，该方案整合了多种推广手段，如搜索引擎优化（SEO&a…...
视频修复技术和实时在线处理
什么是视频修复？ 视频修复技术的目标是填补视频中的缺失部分，使视频内容连贯合理。这项技术在对象移除、视频修复和视频补全等领域有着广泛的应用。传统方法通常需要处理整个视频，导致处理速度慢，难以满足实时处理的需求。 技术发…...
文心一言 VS 讯飞星火 VS chatgpt （396）-- 算法导论25.2 1题
一、在图 25-2 所示的带权重的有向图上运行 Floyd-Warshall 算法，给出外层循环的每一次迭代所生成的矩阵 D ( k ) D^{(k)} D(k) 。如果要写代码，请用go语言。 文心一言： 好的，让我们一步步分析在带权重的有向图上运行 Floyd-Wa…...
如何使用本地大模型做数据分析
工具：interpreter --local 样本数据： 1、启动分析工具 2、显示数据文件内容 输入： 显示/Users/wxl/work/example_label.csv 输出：(每次输出的结果可能会不一样） 3、相关性分析 输入： 分析客户类型与成…...
【Nginx从入门到精通】04-安装部署-使用XShell给虚拟机配置静态ip
文章目录 总结1、XShell ：方便管理多台机器2、配置ip文件：区分大小写 一、查看上网模式二、Centos 7 设置静态ipStage 1 ：登录root账号Stage 2 ：设置静态ip : 修改配置文件 <font colororange>ifcfg-ens33Stage 2-1…...
C# 面向对象的接口
接口，多态性，密封类 C# 接口 遥控器是观众和电视之间的接口。 它是此电子设备的接口。 外交礼仪指导外交领域的所有活动。 道路规则是驾车者，骑自行车者和行人必须遵守的规则。 编程中的接口类似于前面的示例。 接口是： APIsC…...
使用IDEA+Maven实现MapReduced的WordCount
使用IDEAMaven实现MapReduce 准备工作 在桌面创建文件wordfile1.txt I love Spark I love Hadoop在桌面创建文件wordfile2.txt Hadoop is good Spark is fast上传文件到Hadoop # 启动Hadoop cd /usr/local/hadoop ./sbin/start-dfs.sh # 删除HDFS的hadoop对应的input和out…...
go语言示例代码
go语言示例代码， package mainimport "fmt" import "encoding/json"func main() {list : []int{11, 12, 13, 14, 15}for i,x : range list {fmt.Println("i ", i, ",x ", x)}fmt.Println("")for i : range l…...
华为云容器监控平台
首先搜索CCE,点击云容器引擎CCE 有不同的测试，生产，正式环境 工作负载--直接查询服务名看监控 数据库都是走的一个 Redis的查看...
阿里短信发送报错 InvalidTimeStamp.Expired
背景 给客户做的人力资源系统，今天客户用阿里云短信，结果报错： nvalidTimeStamp.Expired Specified time stamp or date value is expired. HTTP Status: 400 RequestID: A 怎么办呢？搜资料， 是客户端时间ÿ…...
Ubuntu问题 -- 设置ubuntu的IP为静态IP (图形化界面设置) 小白友好
目的 为了将ubuntu服务器IP固定, 方便ssh连接人在服务器前使用图形化界面设置 设置 找到自己的网卡名称, 我的是 eno1, 并进入设置界面 查看当前的IP, 网关, 掩码和DNS (注意对应eno1) nmcli dev show掩码可以通过以下命令查看完整的 (注意对应eno1) , 我这里是255.255.255.…...
Sigrity SPEED2000 TDR TDT Simulation模式如何进行时域阻抗仿真分析操作指导-差分信号
Sigrity SPEED2000 TDR TDT Simulation模式如何进行时域阻抗仿真分析操作指导-差分信号 Sigrity SPEED2000 TDR TDT Simulation模式如何进行时域阻抗仿真分析操作指导-单端信号详细介绍了单端信号如何进行TDR仿真分析，下面介绍如何对差分信号进行TDR分析，还是以下图为例进行分…...
Cesium 加载B3DM模型
一、引入Cesium，可以使用该链接下载cesium 链接: https://pan.baidu.com/s/1BRQyaFCkxO2xQQT5RzFUCw?pwdkcv9 提取码: kcv9 在index.html文件中引入cesium <script type"text/javascript" src"/Cesium/Cesium.js"></script> …...
盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来
一、破局：PCB行业的时代之问 在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...
Linux简单的操作
ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树 浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...
Mac软件卸载指南，简单易懂！
刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"࿰…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
在树莓派上添加音频输入设备的几种方法
在树莓派上添加音频输入设备可以通过以下步骤完成，具体方法取决于设备类型（如USB麦克风、3.5mm接口麦克风或HDMI音频输入）。以下是详细指南： 1. 连接音频输入设备 USB麦克风/声卡：直接插入树莓派的USB接口。3.5mm麦克…...
MySQL 主从同步异常处理
阅读原文：https://www.xiaozaoshu.top/articles/mysql-m-s-update-pk MySQL 做双主，遇到的这个错误： Could not execute Update_rows event on table ... Error_code: 1032是 MySQL 主从复制时的经典错误之一，通常表示ÿ…...
Python 高效图像帧提取与视频编码：实战指南
Python 高效图像帧提取与视频编码：实战指南 在音视频处理领域，图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库（如 OpenCV、FFmpeg、PyAV），可以高效处理视频流，实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程，提高处理…...
Sklearn 机器学习 缺失值处理 获取填充失值的统计值
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...