如何实现点击目录跳转到指定位置？【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> …...
告别应用层延时！在迅为RK3568开发板上，将RS485收发切换彻底交给Linux内核驱动
告别应用层延时！在迅为RK3568开发板上将RS485收发切换彻底交给Linux内核驱动 工业自动化领域对通信实时性的要求近乎苛刻，当RS485总线上挂载的多个设备响应时间参差不齐时，应用层手动控制的收发切换就像用机械表校准原子钟——看似可行实则漏…...
如何永久免费使用Cursor Pro？终极破解工具完整指南
如何永久免费使用Cursor Pro？终极破解工具完整指南 【免费下载链接】cursor-free-vip [Support 0.45]（Multi Language 多语言）自动注册 Cursor Ai ，自动重置机器ID ， 免费升级使用Pro 功能: Youve reached your trial …...
震惊！数十万家企业用软件监控员工，数据竟流向广告平台和经纪商！
官宣惊人内幕数十万家企业使用软件监控员工，新研究发现，许多职场监控工具不仅与雇主共享数据，还与数字广告平台和数据经纪商共享。研究详情这项研究由哥伦比亚法学院法律与经济中心高级研究员、前联邦贸易委员会首席技术专家斯蒂芬妮阮&#…...
根据（2022年版课程标准修订）义务教育教科书·七至八年级生物课程内容体系，直接打印快速记忆
七年级生物目录（上册）第一单元 生物和细胞第一章 认识生物第一节 观察周边环境中的生物第二节 生物的特征第二章 认识细胞第一节 学习使用显微镜第二节 植物细胞第三节 动物细胞第四节 细胞的生活第三章 从细胞到生物体第一节 细胞通过分裂产生新细胞第二…...
18 CLIP 论文精读：ViT 如何走向图文多模态？（Learning Transferable Visual Models From Natural Language Supervision）
在前几篇文章中，我们围绕 ViT 的自监督预训练路线进行了连续梳理。MAE 的核心思想是：遮住大部分图像 patch，让模型重建被遮挡区域的像素。BEiT 的核心思想是：先用视觉 tokenizer 把图像转换成离散 visual token，再让模…...
Windows热键侦探：一键揪出占用你快捷键的“元凶“
Windows热键侦探：一键揪出占用你快捷键的"元凶" 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 你是…...
5分钟快速上手：抖音下载器完整使用指南
5分钟快速上手：抖音下载器完整使用指南 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. 抖音批量下…...
java之微信机器人二次开发文档
WTAPI框架weixin ipad 协议 在微信个人号二次开发中的应用，涵盖技术架构、核心功能、开发流程及安全合规要点，为开发者提供系统化解决方案。 ⚡ 核心能力 好友管理：添加好友、删除好友、修改备注、创建标签、获取好友列表、搜索好友信息 消息…...
神经网络概念解码：从物理直觉到工程权衡的思维地图
1. 项目概述：这不是又一本“手把手写反向传播”的书，而是一张神经网络的思维地图“NN#2 — Neural Networks Decoded: Concepts Over Code”这个标题里，“NN#2”不是版本号，而是刻意设计的编号——它暗示这是一场持续进行的认知迭…...
手把手教你用USB ISP下载器给Arduino Nano烧写Bootloader（含ProgISP软件详细配置）
手把手教你用USB ISP下载器为Arduino Nano烧录Bootloader 当你拿到一块全新的Arduino Nano开发板，或是遇到程序无法上传的"变砖"情况时，很可能需要重新烧写Bootloader。Bootloader是存储在微控制器中的一小段特殊程序，它负责与Ard…...