vue项目中实现锚点定位

article/2025/8/23 18:14:14

使用场景:当页面被分割成许多小模块,且页面很长时,锚点功能可以帮助我们快速跳转到想要的模块;而当滑动滚动条时,根据当前视图中的显示的模块自动选中对应的锚点。

思路

  锚点的id对应模块的元素的id。点击锚点时,根据id找到对应的模块,获取此模块距离父级元素的顶部的距离,然后控制父级的滚动条scrollTo到此距离。

  到此只实现了一半,即点击锚点页面滚动到对应的模块内。还需要实现锚点跟随滚动条的位置自动选中。

  实现另一半需要监听滚动事件,在滚动事件中遍历锚点列表,根据锚点id获取对应的模块元素,计算当前滚动条位置处于哪个模块的位置内,从而将此锚点设为选中状态。

代码

html

<template><div class="info-body"><!--锚点列表--><ul class="archor"><li :class="activeStep === anchor.id ? 'active' : ''"v-for="(anchor, index) in anchorList":key="index" @click="jump(anchor.id)"><span>{{ anchor.name }}</span></li></ul><!--隐藏滚动条--><div class="hid-scroll-bar"><div class="scroll-box" id="scroll-box"><!--模块列表--><div v-for="(item, index) in modules"class="info-panel":key="index":id="item.id"><div class="info-content"><!--模块内容--></div></div></div></div></div>
</template>

js

data() {return {activeStep: '',// 默认选中的锚点的key值offsetTop: 0,}},computed: {scrollFn() { // 防抖return _.debounce(this.scroll, 100)},anchorList() { // 锚点列表return [{ id: 'anchor1', name: '锚点1' },{ id: 'anchor2', name: '锚点2' },{ id: 'anchor3', name: '锚点3' },];},modules() { // 模块列表return [{ id: 'anchor1', title: '模块1' },{ id: 'anchor2', title: '模块2' },{ id: 'anchor3', title: '模块3' },];},},mounted() {window.addEventListener('scroll', this.scrollFn, true)},beforeDestroy() {window.removeEventListener('scroll', this.scrollFn, false)},methods: {scroll() {const box = document.getElementById('scroll-box')// 若当前设置的滚动高度大于实际滚动的高度,即为锚点跳转,不再设置选中的锚点if(this.offsetTop > box.scrollTop) {this.offsetTop = 0return}let totalH = 0this.anchorList.some(anchor=> {let scrollItem = document.getElementById(anchor.id)// 锚点对应的模块totalH = totalH + scrollItem.clientHeightlet judge = box.scrollTop < totalHif(judge) {this.activeStep = anchor.idreturn true}})},jump(id) {this.activeStep = id // 设置选中的锚点为当前点击的const box = document.getElementById('scroll-box')let scrollItem = document.getElementById(id)// 锚点对应的模块与最近的一个具有定位的祖宗元素顶部的距离this.offsetTop = scrollItem.offsetTopbox.scrollTo({top: scrollItem.offsetTop,behavior: "smooth",});},}

css

 /*锚点*/.archor {position: absolute;right: 16px;display: flex;flex-direction: column;width: 40px;list-style: none;li {height: 80px;border-right: 3px solid #FAFAFA;display: flex;flex-direction: column;justify-content: center;cursor: pointer;&:first-child {justify-content: flex-start;}&:last-child {justify-content: flex-end;}&.active {border-color: $primary-color;}}}.info-body {position: relative;width: 65%;border-left: 2px solid #F2F2F2;padding: 2px 82px 0 0;box-sizing: border-box;}/*双重包裹,隐藏滚动条*/.hid-scroll-bar {position: relative;width: 100%;height: 100%;.scroll-box {height: 100%;width: 100%;overflow-y: auto;position: absolute;&::-webkit-scrollbar {display: none;}}}

效果

相关连接

关于offsetTop的理解


http://chatgpt.dhexx.cn/article/1iWUJBEE.shtml

相关文章

Vue3项目中锚点定位实现

代码 <!doctype html> <html class"no-js"><head><meta charset"utf-8"><title>锚点</title><script src"https://unpkg.com/vue3/dist/vue.global.js"></script><link rel"styleshee…

锚点定位——如何设置锚点居页面顶部距离,锚点定位并距离顶部一定偏移

锚点是网页制作中超级链接的一种&#xff0c;又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接&#xff0c;运用相当普遍。 使用命名锚记可以在文档中设置标记&#xff0c;这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接&#…

vue中实现锚点定位

vue中实现锚点定位 通过监听滚动事件&#xff0c;高亮显示锚点按钮添加点击事件&#xff0c;根据锚点滚动至对应区域并实现平滑滚动 这里主要是实现了一个简单的滚动触发锚点高亮&#xff0c;以及点击锚点触发滚动的功能 如果是获取浏览器的滚动高度&#xff0c;各个浏览器有所…

VUE实现锚点定位

文章目录 锚点定位功能总述提取标签内的关键词目录的渲染和点击跳转1.目录渲染2.锚点跳转 总结 锚点定位功能总述 在系统中会有管理端和客户端两种&#xff0c;在管理端中通过wangediter发布文章&#xff0c;然后在客户端中获取文章的数据&#xff0c;将其中h1和h2标签中的文字…

Vue锚点定位

VUE锚点定位 // 点击此处<div click"goDingyue">立即订阅</div>绑定事件 methods: {goDingyue() {// 获取元素在页面中的位置console.log(this.$refs.dingyue_box_ref.getBoundingClientRect());// document// .getElementById("agentTitle&qu…

jquery锚点定位

jquery实现锚点定位功能 这里主要是通过jquery实现了一个简单的滚动触发锚点高亮&#xff0c;以及点击锚点触发滚动的功能 $leftnav为左侧楼层导航栏(left-nav)&#xff0c;右侧right-content-body为滚动区域。主要是利用了scrollTo()和对滚动区域scroll事件的监听实现锚点定位…

锚点定位

1. 例如我们在做一个很长的网页时&#xff0c;需要在页面内做一个导航&#xff0c;点击导航里的链接不是新开一个窗口或者跳转到其他网址&#xff0c;而是跳转到当前页的某一个位置。那么所要跳转到的那个位置&#xff0c;我们就叫做锚点&#xff0c;它是一种在页面内部定位的…

uniapp锚点定位

uniapp 锚点定位 需求&#xff1a;在 uniapp 写 App 时&#xff0c;根据后端接口返回的数据渲染图文&#xff0c;并且要对图片进行锚点定位。 前提&#xff1a;后端要给每张图片一个单独的参数&#xff0c;用来区分每张图片。 思路&#xff1a;前端将这个特定参数注入到图片标…

如何设置锚点居页面顶部距离

锚点是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位…

锚点定位的三种解决方法

因为在项目中遇到锚点定位的问题&#xff0c;觉得有必要单独成文&#xff0c;来介绍锚点定位的解决办法。 一 学习锚点定位之前的知识储备: 1.1 #号的作用 #代表网页中的一个位置。其右面的字符&#xff0c;就是该位置的标识符。比如&#xff0c;http://www.example.com/ind…

什么是 cookie? 会话 cookie 与持久性 cookie 之间 有何区别?

转载&#xff1a; https://www.cisco.com/c/en/us/products/collateral/security/web-security-appliance/cn/117925-technote-csc-00.html 有 2 种不同类型的 cookie&#xff1a;会话 cookie 和持久性 cookie 简介 本文将介绍什么是 HTTP cookie&#xff0c;以及会话 cookie …

数据持久化

数据持久化 企业数据架构存储技术存储架构 企业数据架构 持久化&#xff08;Persistence&#xff09;&#xff0c;即把数据&#xff08;如内存中的对象&#xff09;保存到可永久保存的存储设备中&#xff0c;如磁盘等。 数据按存储类型可以分为缓存数据库、关系型数据库、NoSQ…

事务四大特征:原子性,一致性,隔离性和持久性。

事务四大特征&#xff1a;原子性&#xff0c;一致性&#xff0c;隔离性和持久性。 1、原子性&#xff08;Atomicity&#xff09; 一个原子事务要么完整执行&#xff0c;要么干脆不执行。这意味着&#xff0c;工作单元中的每项任务都必须正确执行。如果有任一任务执行失败&…

MySQL事务原子性、一致性和持久性以及回滚是如何实现的?

前言 《MySQL事务详解》一文中详细讲解了事务的概念&#xff0c;包括ACID特性&#xff0c;事务并发引起的问题&#xff0c;事务的四种隔离级别。 在事务的四种特性中&#xff0c;原子性、一致性、持久性通过数据库的redo log和undo log来完成&#xff0c;redo log称为重做日志&…

InnoDB引擎--事务持久性

事务是指构成单一逻辑工作单元的操作的集合。数据库系统维护事务的ACID四个特性: 原子性:事务的所有操作在数据库中要么全部反映,要么全部不反映。一致性:事务执行前后数据库保持约束一致性和业务逻辑一致性。隔离性:在事务并发执行时,各个事务都感觉不到其他事务的存在。…

MySQL 是如何保证一致性、原子性和持久性的!

编辑&#xff1a;业余草 来源&#xff1a;https://www.xttblog.com/?p4891 今天&#xff0c;我们来简单的看一下 MySQL 的一致性、原子性和持久性问题。后面还扩展了 15 个简单的面试题&#xff0c;希望大家喜欢&#xff01; 1、Mysql怎么保证一致性的&#xff1f; OK&#xf…

MySQL InnoDB 存储引擎写入磁盘(落盘)的原理\MySQL怎么保证持久性、原子性?(MySQL中是如何实现事务提交和回滚的)\隔离性

文章目录 一、MySQL InnoDB 存储引擎写入磁盘&#xff08;落盘&#xff09;的原理一条 update 语句在写入磁盘的过程为什么必须有“两阶段提交”呢&#xff1f; binlog 的写入机制 二、MySQL怎么保证持久性、原子性?(MySQL中是如何实现事务提交和回滚的)redo log(重做日志) 如…

MySQL日志(undo log 和 redo log 实现事务的原子性/持久性/一致性)

日志的重要性 日志绝对是数据库的核心. 持久化的日志记录了各种重要的信息.数据的恢复需要依赖日志。 慢查询sql语句需要用到慢查询日志。以及错误日志中保存着mysqld数据库服务端在启动过程中发生的重大错误信息... 数据库重要组成 本质上来说是一个文件系统 (两大重要组…

MySQL究竟是如何做到持久性的?

前言 我们学习事务中&#xff0c;对于持久性&#xff08;durability&#xff09;是这样定义的&#xff1a;事务一旦提交&#xff0c;则其所有的修改将会保存到数据库当做。即使此时系统崩溃&#xff0c;修改的数据也不会丢失。同时数据库连接中&#xff0c;默认有一个参数auto…

理解事务四大特性(Transaction)——原子性、一致性、隔离性和持久性(ACID)

事务是指对系统进行的一组操作&#xff0c;为了保证系统的完整性&#xff0c;事务需要具有ACID特性&#xff0c;具体如下&#xff1a; 1. 原子性&#xff08;Atomic&#xff09; 原子性是指事务是一个不可分割的工作单位&#xff0c;事务中的操作要么都发生&#xff0c;要么都…