当前位置： 首页 > news >正文

如何实现点击目录跳转到指定位置？【vue】

news 2026/4/4 23:32:52

需求：实现目录点击跳转到指定位置，点击后直接定位到指定模块

效果：

实现方法：

（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】

需求&#xff1a;实现目录点击跳转到指定位置&#xff0c;点击后直接定位到指定模块 效果&#xff1a; 实现方法&#xff1a; &#xff08;1&#xff09;a标签跳转 普通使用&#xff1a; <!DOCTYPE html> <html><head><title>a-Demo</title>&l…...

编程日记 2024/11/22 23:36:09

SQL 通配符

SQL 通配符 在SQL中&#xff0c;通配符是一种特殊字符&#xff0c;用于在LIKE子句中搜索数据。它们主要用于模式匹配&#xff0c;允许你搜索符合特定模式的值。SQL中的通配符通常用于SELECT、UPDATE和DELETE语句中&#xff0c;以增加查询的灵活性。本文将详细介绍SQL中常用的通…...

编程日记 2024/11/22 23:34:07

ubuntu显示管理器_显示导航栏

ubuntu文件管理器_显示导航栏 一、原始状态&#xff1a; 二、显示导航栏状态&#xff1a; 三、原始状态--->导航栏状态: 1、打开dconf编辑器&#xff0c;直接在搜索栏搜索 dconf-editor ------如果没有安装&#xff0c;直接按流程安装即可。 2、进入目录&#xff1a;org …...

编程日记 2024/11/22 23:32:05

黑芝麻嵌入式面试题及参考答案

请详细描述二叉树的深度优先搜索（dfs）流程。 深度优先搜索是一种用于遍历二叉树的重要算法，主要有先序遍历、中序遍历和后序遍历三种方式。 先序遍历的流程是，首先访问根节点，然后递归地遍历左子树，最后递归地遍历右子树。这就好比是在探索一个家族树，先拜访家族中的长辈…...

编程日记 2024/11/22 23:31:03

使用 PyTorch-BigGraph 构建和部署大规模图嵌入的完整教程

当涉及到图数据时&#xff0c;复杂性是不可避免的。无论是社交网络中的庞大互联关系、像 Freebase 这样的知识图谱&#xff0c;还是推荐引擎中海量的数据量&#xff0c;处理如此规模的图数据都充满挑战。 尤其是当目标是生成能够准确捕捉这些关系本质的嵌入表示时&#xff0c;…...

编程日记 2024/11/22 23:30:03

系统性能优化方法论详解：从理解系统到验证迭代

在当今的企业级和云计算环境中&#xff0c;系统性能优化已成为提升竞争力的关键因素。本文将对系统优化的步骤进行深入解析&#xff0c;帮助读者系统化地进行性能优化&#xff0c;从而显著提升系统的整体表现。 流程概述: 系统性能优化的流程可以分为以下几个关键步骤&#x…...

编程日记 2024/11/22 23:28:00

使用Tengine 对负载均衡进行状态检查（day028）

本篇文章对于在服务器已经安装了nginx,但却希望使用Tengine 的状态检查或其他功能时使用&#xff0c;不需要卸载服务器上的nginx,思路是使用干净服务器&#xff08;未安装过nginx&#xff09;通过编译安装Tengine&#xff0c;通过对./configure的配置&#xff0c;保证安装Tengi…...

编程日记 2024/11/22 23:26:59

网站推广实战案例：杭州翔胜科技有限公司如何为中小企业打开市场大门

以下是以杭州翔胜科技有限公司为例&#xff0c;解析其如何通过网站推广为中小企业打开市场大门的实战案例&#xff1a; 一、一站式网站推广方案 杭州翔胜科技有限公司提供一站式网站推广方案&#xff0c;该方案整合了多种推广手段&#xff0c;如搜索引擎优化&#xff08;SEO&a…...

编程日记 2024/11/22 23:24:57

视频修复技术和实时在线处理

什么是视频修复&#xff1f; 视频修复技术的目标是填补视频中的缺失部分&#xff0c;使视频内容连贯合理。这项技术在对象移除、视频修复和视频补全等领域有着广泛的应用。传统方法通常需要处理整个视频&#xff0c;导致处理速度慢&#xff0c;难以满足实时处理的需求。 技术发…...

编程日记 2024/11/22 23:21:53

文心一言 VS 讯飞星火 VS chatgpt （396）-- 算法导论25.2 1题

一、在图 25-2 所示的带权重的有向图上运行 Floyd-Warshall 算法&#xff0c;给出外层循环的每一次迭代所生成的矩阵 D ( k ) D^{(k)} D(k) 。如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; 好的&#xff0c;让我们一步步分析在带权重的有向图上运行 Floyd-Wa…...

编程日记 2024/11/22 23:20:52

如何使用本地大模型做数据分析

工具&#xff1a;interpreter --local 样本数据&#xff1a; 1、启动分析工具 2、显示数据文件内容 输入&#xff1a; 显示/Users/wxl/work/example_label.csv 输出&#xff1a;(每次输出的结果可能会不一样&#xff09; 3、相关性分析 输入&#xff1a; 分析客户类型与成…...

编程日记 2024/11/22 23:19:51

【Nginx从入门到精通】04-安装部署-使用XShell给虚拟机配置静态ip

文章目录 总结1、XShell &#xff1a;方便管理多台机器2、配置ip文件&#xff1a;区分大小写 一、查看上网模式二、Centos 7 设置静态ipStage 1 &#xff1a;登录root账号Stage 2 &#xff1a;设置静态ip : 修改配置文件 <font colororange>ifcfg-ens33Stage 2-1&#xf…...

编程日记 2024/11/22 23:16:46

C# 面向对象的接口

接口&#xff0c;多态性&#xff0c;密封类 C# 接口 遥控器是观众和电视之间的接口。 它是此电子设备的接口。 外交礼仪指导外交领域的所有活动。 道路规则是驾车者&#xff0c;骑自行车者和行人必须遵守的规则。 编程中的接口类似于前面的示例。 接口是&#xff1a; APIsC…...

编程日记 2024/11/22 23:15:45

使用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…...

编程日记 2024/11/22 23:13:43

go语言示例代码

go语言示例代码&#xff0c; 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…...

编程日记 2024/11/22 23:12:42

华为云容器监控平台

首先搜索CCE,点击云容器引擎CCE 有不同的测试&#xff0c;生产&#xff0c;正式环境 工作负载--直接查询服务名看监控 数据库都是走的一个 Redis的查看...

编程日记 2024/11/22 23:07:35

阿里短信发送报错 InvalidTimeStamp.Expired

背景 给客户做的人力资源系统&#xff0c;今天客户用阿里云短信&#xff0c;结果报错&#xff1a; nvalidTimeStamp.Expired Specified time stamp or date value is expired. HTTP Status: 400 RequestID: A 怎么办呢&#xff1f;搜资料&#xff0c; 是客户端时间&#xff…...

编程日记 2024/11/22 23:06:34

Ubuntu问题 -- 设置ubuntu的IP为静态IP (图形化界面设置) 小白友好

目的 为了将ubuntu服务器IP固定, 方便ssh连接人在服务器前使用图形化界面设置 设置 找到自己的网卡名称, 我的是 eno1, 并进入设置界面 查看当前的IP, 网关, 掩码和DNS (注意对应eno1) nmcli dev show掩码可以通过以下命令查看完整的 (注意对应eno1) , 我这里是255.255.255.…...

编程日记 2024/11/22 23:05:33

Sigrity SPEED2000 TDR TDT Simulation模式如何进行时域阻抗仿真分析操作指导-差分信号

Sigrity SPEED2000 TDR TDT Simulation模式如何进行时域阻抗仿真分析操作指导-差分信号 Sigrity SPEED2000 TDR TDT Simulation模式如何进行时域阻抗仿真分析操作指导-单端信号详细介绍了单端信号如何进行TDR仿真分析，下面介绍如何对差分信号进行TDR分析，还是以下图为例进行分…...

编程日记 2024/11/22 23:03:31

Cesium 加载B3DM模型

一、引入Cesium&#xff0c;可以使用该链接下载cesium 链接: https://pan.baidu.com/s/1BRQyaFCkxO2xQQT5RzFUCw?pwdkcv9 提取码: kcv9 在index.html文件中引入cesium <script type"text/javascript" src"/Cesium/Cesium.js"></script> …...

编程日记 2024/11/22 23:00:29

Condition底层机制剖析：多线程等待与通知机制 _

在使用Lock之前&#xff0c;使用的最多的同步方式应该是synchronized关键字来实现同步方式了。配合Object的wait()、notify()系列方法可以实现等待/通知模式。 Condition接口也提供了类似Object的监视器方法&#xff0c;与Lock配合可以实现等待/通知模式&#xff0c;但是这两者…...

编程新知 2026/4/4 23:21:17

python statistics

# Python statistics模块&#xff1a;一个被低估的数据分析工具 很多人第一次接触Python数据分析时&#xff0c;往往会直奔pandas或numpy而去&#xff0c;这当然没错。但有时候&#xff0c;我们需要的只是简单的统计计算&#xff0c;比如算个平均数、中位数&#xff0c;或者看看…...

编程新知 2026/4/4 23:19:17

Golutra：超越 IDE , 一个人，一个 AI 军团！使用赛博监工系统，指挥你的 AI 牛马

⚡ 你有没有想过&#xff0c;如何能像管理微信群一样管理你的 AI 团队&#xff0c;让多 Agent 协同工作不再是幻想&#xff01; | 以下观点都是个人使用&#xff0c;以及测评观点。 AI 工具革命的下一个阶段 如何能通过多路协同的方式调用不同的 AI 工具&#xff0c;然后又让…...

编程新知 2026/4/4 22:59:03

IDEA鲜亮配色方案实战：Java/Mapper.xml/yml文件高亮配置指南（附下载）

IDEA鲜亮配色方案实战&#xff1a;Java/Mapper.xml/yml文件高亮配置指南&#xff08;附下载&#xff09; 长时间面对单调的代码编辑器界面容易导致视觉疲劳&#xff0c;而一套精心设计的配色方案不仅能提升编码愉悦度&#xff0c;还能通过色彩区分显著提高代码阅读效率。本文将…...

编程新知 2026/4/4 22:42:43

seo网站推广与社交媒体营销的结合_seo网站推广的投资回报率如何计算

SEO网站推广与社交媒体营销的结合&#xff1a;如何计算SEO网站推广的投资回报率 在当今的数字营销时代&#xff0c;SEO网站推广和社交媒体营销是两个不可或缺的组成部分。它们的结合可以帮助企业更好地吸引潜在客户&#xff0c;提高品牌知名度&#xff0c;并最终推动销售增长。…...

编程新知 2026/4/4 22:40:43

智能风扇调节：打造安静高效的系统散热优化方案

智能风扇调节&#xff1a;打造安静高效的系统散热优化方案 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/FanCon…...

编程新知 2026/4/4 21:39:48

YOLO12保姆级教程：2025最新目标检测模型，5分钟开箱即用

YOLO12保姆级教程&#xff1a;2025最新目标检测模型&#xff0c;5分钟开箱即用 1. 前言&#xff1a;为什么选择YOLO12&#xff1f; 目标检测是计算机视觉领域最基础也最重要的任务之一。2025年最新发布的YOLO12模型&#xff0c;凭借其革命性的注意力为中心架构&#xff0c;在…...

编程新知 2026/4/4 21:11:43

从电路仿真到面包板：手把手验证三端LC振荡器的相位平衡条件（附Multisim文件）

从电路仿真到面包板&#xff1a;手把手验证三端LC振荡器的相位平衡条件 在电子电路设计中&#xff0c;LC振荡器作为基础却至关重要的电路模块&#xff0c;其稳定性和可靠性直接影响整个系统的性能。而相位平衡条件&#xff0c;这个看似简单的"两同&#xff08;电抗性质&am…...

编程新知 2026/4/4 20:11:09

AWS容器服务贡献者终极指南：如何成为AWS容器生态的核心参与者 [特殊字符]

AWS容器服务贡献者终极指南&#xff1a;如何成为AWS容器生态的核心参与者 &#x1f680; 【免费下载链接】containers-roadmap This is the public roadmap for AWS container services (ECS, ECR, Fargate, and EKS). 项目地址: https://gitcode.com/gh_mirrors/co/contain…...

编程新知 2026/4/4 19:28:45

人脸检测新突破：cv_resnet101_face-detection_cvpr22papermogface对戴口罩人脸识别率达91.3%

人脸检测新突破&#xff1a;cv_resnet101_face-detection_cvpr22papermogface对戴口罩人脸识别率达91.3% 你还在为人脸检测工具在复杂场景下“掉链子”而烦恼吗&#xff1f;比如合影里远处的小脸、侧脸&#xff0c;或者戴着口罩、被遮挡的人脸&#xff0c;传统工具常常识别不出…...

编程新知 2026/4/4 19:04:29