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

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

news 2026/2/8 22:11:28

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

效果：

实现方法：

（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

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2026/2/5 4:33:58

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/31 13:13:28

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

编程新知 2026/1/30 6:20:08

华为OD最新机试真题-数组组成的最小数字-OD统一考试（B卷）

题目描述 给定一个整型数组，请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3，则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组，0<数组长度<= 100，0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

编程新知 2025/9/21 23:43:15

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程新知 2026/2/8 0:47:08