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

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

news 文章来源：https://blog.csdn.net/aaaa_aaab/article/details/143948205 2025/5/2 2:41:05

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

效果：

实现方法：

（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

阿里巴巴官方「SpringCloudAlibaba全彩学习手册」限时开源！

最近我在知乎上看过的一个热门回答&#xff1a; 初级 Java 开发面临的最大瓶颈在于&#xff0c;脱离不出自身业务带来的局限。日常工作中大部分时间在增删改查、写写接口、改改 bug&#xff0c;久而久之就会发现&#xff0c;自己的技术水平跟刚工作时相比没什么进步。 所以我们…...

编程日记 2024/11/22 22:59:28

Docker是一个容器化平台注意事项

Docker本身是一个容器化平台&#xff0c;它允许你将应用及其依赖打包到一个可移植的容器中&#xff0c;然后可以在任何安装了Docker的机器上运行这个容器。Docker容器是跨平台的&#xff0c;但有一些限制和注意事项&#xff1a; 跨架构不可行 操作系统兼容性&#xff1a;Docke…...

编程日记 2024/11/22 22:58:26

Redis中的zset用法详解

文章目录 Redis中的zset用法详解一、引言二、zset的基本概念和操作1、zset的添加和删除1.1、添加元素1.2、删除元素 2、zset的查询2.1、获取元素分数2.2、获取元素排名 3、zset的范围查询3.1、按排名查询3.2、按分数查询 三、zset的应用场景1、排行榜1.1、添加玩家得分1.2、获取…...

编程日记 2024/11/22 22:56:24

上位机编程命名规范

1.大小写规范 文件名全部小写是一种广泛使用的命名约定&#xff0c;特别是在跨平台开发和开源项目中。主要原因涉及技术约束、可读性和一致性等方面。以下是原因和优劣势的详细分析&#xff1a; 1. 避免跨平台问题 不同操作系统对文件名的大小写处理方式不同&#xff1a; Li…...

编程日记 2024/11/22 22:54:22

Python 操作mysql - 关系型数据库存储

Python 操作mysql - 关系型数据库存储 文章目录 Python 操作mysql - 关系型数据库存储简单介绍连接数据库创建表插入数据更新数据删除数据查询数据 简单介绍 关系型数据库是一种以“关系”的方式来组织和存储数据的数据库。它使用表&#xff08;也称为“关系”&#xff09;来表…...

编程日记 2024/11/22 22:50:17

React基础知识一

写的东西太多了&#xff0c;照成csdn文档编辑器都开始卡顿了&#xff0c;所以分篇写。 1.安装React 需要安装下面三个包。 react:react核心包 react-dom:渲染需要用到的核心包 babel:将jsx语法转换成React代码的工具。&#xff08;没使用jsx可以不装&#xff09;1.1 在html中…...

编程日记 2024/11/22 22:49:16

游戏行业趋势：“AI、出海、IP”大热下，如何提升竞争力？

游戏&#xff1a;新品供给影响业绩释放节奏&#xff0c;后续游戏新品逐步上线&#xff0c;或驱动板块业绩修复 2024年前三季度A股游戏板块实现营业收入681.8亿元&#xff0c;同比增长5.1%&#xff0c;实现归母净利润73.3亿元&#xff0c;同比下滑30.4%&#xff0c;或主要受 20…...

编程日记 2024/11/22 22:48:15

shell--第一次作业

1.接收用户部署的服务名称 # 脚本入口 read -p "请输入要部署的服务名称&#xff1a;" service_name 2.判断服务是否安装 # 判断服务是否安装 if rpm -q "$service_name" &>/dev/null; then echo "服务 $service_name 已安装。" 已…...

编程日记 2024/11/22 22:47:14

Rust：原子操作 AtomicBool

在 Rust 中&#xff0c;你可以使用 std::sync::atomic 模块来进行原子操作。原子操作在多线程环境中特别有用&#xff0c;因为它们可以确保操作的原子性和可见性&#xff0c;从而避免数据竞争和其他并发问题。 为了读取和设置布尔值&#xff0c;你可以使用 AtomicBool 类型。以…...

编程日记 2024/11/22 22:42:09

深入浅出学算法002-n个1

任务内容 Description 由n个1组成的整数能被K&#xff08;K<10000)整除&#xff0c;n至少为多少&#xff1f; Input 多组测试数据&#xff0c;第一行输入整数T,表示组数 然后是T行&#xff0c;每行输入1个整 数代表K Output 对于每组测试数据输出1行&#xff0c;值为n Sampl…...

编程日记 2024/11/22 22:40:07