如何实现点击目录跳转到指定位置?【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);}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/61535.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

性能测试场景设计:打造高效、稳定的系统架构

在软件开发过程中&#xff0c;性能测试是确保系统高效运行的关键步骤。通过模拟真实用户负载&#xff0c;我们可以评估系统的响应时间、吞吐量和资源利用率等关键指标。本文将详细介绍如何设计一个全面的性能测试场景&#xff0c;以帮助您识别潜在的性能瓶颈并优化系统性能。 …

uni-app如何向Vue那样操作dom节点

2024年8月2日 引言 一般节点渲染出来后&#xff0c;其样式多为固定。如果之后想进行样式变化&#xff0c;在Vue.js框架中&#xff0c;就可以在js模块用document API获取节点进行操作。但是uni-app并没有document这样的API&#xff0c;所以当碰到这种需要在js模块对节点进行操…

【SKFramework框架】二、快速启动

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群&#xff1a;398291828小红书小破站 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 【Unity3D框架】SKFramework框架完全教程《全…

鸿蒙多线程开发——线程间数据通信对象02

1、前 言 本文的讨论是接续鸿蒙多线程开发——线程间数据通信对象01的讨论。在上一篇文章中&#xff0c;我们讨论了常规的JS对象(普通JSON对象、Object、Map、Array等)、ArrayBuffer。其中讨论了ArrayBuffer的复制传输和转移传输方式。 下面&#xff0c;我们将讨论SharedArra…

React 表单Form 中的 useForm

1、介绍 useForm 是 React Hook Form 中的核心 Hook&#xff0c;用于管理表单的状态和行为。它提供了处理表单验证、数据收集、状态管理等功能的简便方法。useForm 本质上是用于创建和配置表单&#xff0c;并允许你在组件中与表单字段交互。 2、基本用法 useForm 是一个函数…

时序论文22|ICML24港科大:面向多变量不规则的时间序列预测方法

论文标题&#xff1a;Irregular Multivariate Time Series Forecasting: A Transformable Patching Graph Neural Networks Approach 论文链接&#xff1a;https://openreview.net/pdf?idUZlMXUGI6e 前言 这篇文章在“定位研究问题”方面很值得学习。其实前段时间对时序研究…

Linux离线安装Docker命令,简单镜像操作

解压安装包 首先&#xff0c;使用 tar 命令解压 docker-27.3.1.tgz 安装包&#xff1a; tar -zxvf docker-27.3.1.tgz 将二进制文件移动到可执行路径上的目录 接着&#xff0c;将解压出来的 Docker 二进制文件复制到系统的可执行路径&#xff08;通常是 /usr/bin/&#xff09…

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

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

springboot基于微信小程序的食堂预约点餐系统

摘 要 基于微信小程序的食堂预约点餐系统是一种服务于学校和企事业单位食堂的智能化解决方案&#xff0c;旨在提高食堂就餐的效率、缓解排队压力&#xff0c;并优化用户的就餐体验。系统作为一种现代化的解决方案&#xff0c;为食堂管理和用户就餐提供了便捷高效的途径。它不仅…

Spring Boot框架Starter组件整理

在Spring Boot框架中&#xff0c;starter是一种预定义的依赖集合&#xff0c;旨在简化Maven或Gradle等构建工具中的依赖管理。每个starter都包含了实现特定功能所需的库和组件&#xff0c;以及相应的配置文件。开发者只需在项目中引入相应的starter依赖&#xff0c;即可快速搭建…

Java线程池详解

线程池是用来管理和复用线程的一种技术&#xff0c;它避免了频繁的创建和销毁线程的开销&#xff0c;提高了应用程序的性能。在 Java 中&#xff0c;ExecutorService 是一个非常常用的接口&#xff0c;它提供了线程池的基本功能。 1. 线程池的优势 线程复用&#xff1a;线程池…

软件测试—— Selenium 常用函数(二)

前一篇文章&#xff1a;软件测试—— Selenium 常用函数&#xff08;一&#xff09;-CSDN博客 目录 前言 一、浏览器 1.常见操作 &#xff08;1&#xff09;打开网站 &#xff08;2&#xff09;前进、后退、刷新 2.参数设置 &#xff08;1&#xff09;设置无头模式 &am…

webgl threejs 云渲染(服务器渲染、后端渲染)解决方案

云渲染和流式传输共享三维模型场景 1、本地无需高端GPU设备即可提供三维项目渲染 云渲染和云流化媒体都可以让3D模型共享变得简单便捷。配备强大GPU的远程服务器早就可以处理密集的处理工作&#xff0c;而专有应用程序&#xff0c;用户也可以从任何个人设备查看全保真模型并与…

springboot基于Spring Boot的古城景区管理系统的设计与实现docx

摘 要 古城景区管理系统是一个集景区导游功能于一体的综合管理平台&#xff0c;旨在提升游客的参观体验和提高管理效率。系统通过提供详尽的热门景点、客房类型、酒店信息、美食类型、特色美食、文创产品及导游服务&#xff0c;使游客能够深入了解古城的历史与文化。该系统集成…

Java list

在 Java 中&#xff0c;链表&#xff08;LinkedList&#xff09;是一个非常重要的数据结构&#xff0c;它可以动态地插入和删除元素&#xff0c;因此比数组更灵活。Java 提供了 LinkedList 类&#xff0c;该类实现了 List 接口&#xff0c;并且是基于双向链表实现的&#xff0c…

彻底理解如何保证Redis和数据库数据一致性问题

一.背景 系统中缓存最常用的策略是&#xff1a;服务端需要同时维护 DB 和 Cache 并且是以 DB 的结果为准&#xff0c;那么就可能出现 DB 和 Cache 数据不一致的问题。 二.读数据 逻辑如下&#xff1a; 当客户端发起查询数据的请求&#xff0c;首先回去Redis中查看没有没该数据&…

openwebui使用

文章目录 1、feature2、安装使用2.1 安装过程2.2 安装好后 1、feature 可以加载多个大模型 同时回复 模型问答: 使用vLLM框架部署模型&#xff0c;再使用Open WebUI直接进行模型问答 多模型支持: 多模型回复比对&#xff08;Qwen2-72B-Instruct, llama3-70b-8192, mixtral-8x7…

React Native 全栈开发实战班 - 性能与调试之打包与发布

在完成 React Native 应用的开发与性能优化后&#xff0c;下一步就是将应用打包并发布到各大应用市场&#xff0c;如 Apple App Store 和 Google Play Store。本章节将详细介绍 React Native 应用的打包与发布流程&#xff0c;包括 Android 和 iOS 平台的打包步骤、签名配置、发…

【企业级分布式系统】Ceph集群

文章目录 存储基础单机存储设备单机存储的问题商业存储解决方案分布式存储&#xff08;SDS&#xff0c;软件定义的存储&#xff09;分布式存储的类型 CephCeph的基本特点Ceph的应用场景 Ceph的架构Ceph的核心组件OSD存储引擎Ceph数据存储过程Ceph集群部署 基于 ceph-deploy 部署…

---usb 摄像头的Linux 下查询的命令

0) 先 列一下机子上所插的摄像头: ~$ v4l2-ctl --list-devices iContact Camera Pro: iContact C (usb-0000:00:14.0-2): /dev/video3 /dev/video4 /dev/media1 USB 2.0 PC Camera: PC Camera (usb-0000:00:14.0-8): /dev/video1 /dev/video2 /dev…