vue：实现锚点双向滚动/文章章节联动滚动效果

Vue章节联动滚动示例
原创 已于 2023-07-31 16:53:55 修改 · 4k 阅读 · 26 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #双向滚动

于 2022-09-19 17:38:43 首次发布

文章目录

需求描述

需要实现类似doc中文档大纲的效果，点击对应章节的名称时定位到相应的正文；而当正文滚动时，高亮显示对应的章节名称
章节联动效果图

实现思路

其实笔者一开始想到的是利用a标签页内跳转（也就是“锚点”），类似于Element-UI官方文档：单选框组
当鼠标悬浮到页内某一章节名称时，会显示符号为“¶”的锚点，点击锚点会在网页链接后拼接对应hash值实现页内跳转
饿了么UI官方文档-锚点实现页内跳转
但仅靠锚点难以实现滚动页面内容时，定位到对应章节名称。。还是得靠度娘
经过了一番搜索与尝试，我发现所有标注了“vue锚点双向滚动”的文章实际都采用了监听滚动/滚动页面的实现思路和“锚点”其实并无关联。。，总之，笔者最终翻到了这篇锚点双向定位博客，虽然原文的示例代码稍显粗糙，但这篇的本质其实就是经过个人润色的那篇博客哦☆♦☆！

示例代码

请在你本地引入了Element-UI的项目中，新建一个test.vue来运行以下示例代码~

<!--
 *
最低0.47元/天 解锁文章

200万优质内容无限畅学
vue项目使用锚点双向定位 实现滚动功能
weixin_52827704的博客
03-31 8139
vue项目使用双向锚点定位 如图所示： 点击左侧菜单可以跳转到对应内容，鼠标滚轮滚动 菜单也根据内容显示active项 代码如下： 给父盒子一个id <div class="case-infos" id="content"> <ul class="tabs"> <li v-for="(item, index) in tabsList" :key="index"
vue实现吸顶、锚点和滚动高亮按钮效果
qq_46617584的博客
08-05 3707
vue实现吸顶、锚点和滚动高亮按钮效果
elementui tabs动态渲染+锚点滚动定位
最新发布
宝拉天天想放假
09-08 282
到这里都没问题，滚动和锚点定位出现问题：在视图渲染的时候所有的tab对应下方dom在初始化的时候都进行了创建，也就是上方tab的显示隐藏没有联动下方dom，导致tab无法一个对应的关系，现在锚点出现错乱问题。我这里解决办法：把对象属性isShow为true（显示）重新组成新数组，组成tabs数组结构，然后下方dom通过上方一个ref属性 找到对应关系进行锚点展示。第一版：tab是固定的，然后点击不同tab定位当前tab下内容进行展示，滚动鼠标滑轮上方tab高亮定位是某个tab下的内容。
Vue 实现文章锚点定位，顶栏遮住了锚点，使用scrollTo代替scrollIntoView设置偏移量
qq_634380940的博客
07-17 555
Vue 实现文章锚点定位，顶栏遮住了锚点，使用scrollTo代替scrollIntoView设置偏移量
锚点双向定位滚动功能-升级版（vue）
lovewebeye的专栏
10-27 3205
对上一文章中的功能进行进一步的优化升级：锚点双向定位滚动功能（Vue实现） 效果1（窗口大于菜单）： 效果2（窗口小于菜单）: 效果3（点击事件）： 代码实现： <template> <div ref="sliderBody" class="slider-main"> <div class="slider-body"> <div ref="sliderMenu" class="slider-menu" :style="
vue 双向锚点实现 简易版（scrollIntoView）
lemon今天学习了吗？的博客
11-11 5953
一. 需求：左边是内容板块，右边是目录结构，点击右边内容跳转到左边相应位置展示，滑动左边内容右边目录自动跳转。
Vue监听滚动实现锚点定位(双向)示例
12-30
在项目需求中需要实现一个滚轴联动锚点的功能 效果图如下： 功能代码demo如下： (item, key=index xss=removed xss=removed> <div style=width:100%;height:100%;font-size:30
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
10-16
在`jump`方法中，首先设置了当前激活菜单项的序号，然后计算了目标位置的滚动距离，并通过设置`behavior`为`smooth`来实现平滑滚动效果。 ```javascript jump(index){ this.activeMenu = index; // 当前导航 ...
Vue 双向锚点实现
xwc999
01-03 1336
4.点击锚点时触发 逻辑就是点击时设置高亮哪个，跳转到那个元素的位置。5.滚动与点击冲突解决（点击时会触发滚动，这样会有点冲突）
锚点双向定位滚动功能（Vue实现）
lovewebeye的专栏
10-23 3416
DEMO演示 功能代码实现 <template> <div class="slider-main"> <div class="slider-body"> <div ref="sliderMenu" class="slider-menu"> <div class="slider-menu-item" v-for="(item, index) in data" :key='index' :style="ite
Vue监听滚动实现锚点定位（双向）
热门推荐
shentibeitaokong的博客
05-21 5万+
这里很感谢 http://www.jb51.net/article/110325.htm 这篇文章带来的启发 但是我和他不同，网上的方法都是 这样计算滚动条距离窗口顶部的距离，注意是窗口，用的是document对象 // Chrome document.body.scrollTop // Firefox document.documentElement.scrollTop ...
vue锚点定位+滚动监听+函数节流
Jevons的博客
07-20 2795
此功能在上篇文章上增加了个函数节流 性能上会更好些。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt;   &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-s
vue实现锚点滚动
计算机辅助工程
11-17 1653
全部应用
vue实现目录锚点且滚动到指定区域时锚点自动回显——双向锚点
yehaocheng520的博客
04-09 607
vue实现目录锚点且滚动到指定区域时锚点自动回显——双向锚点
vue实现滚动锚点定位
爱兰河少
11-12 2649
效果如图： 注意：gd-tabs标签为内部框架组件，使用时替换为自己框架即可 <template> <div class="custom-demo-view" style="padding: 1rem;"> <div> <gd-tabs v-if="reload" @tabclick="jump" v-mode...
Vue锚点双向定位
weixin_47218354的博客
11-22 388
【代码】Vue锚点双向定位。
Vue 锚点平滑滚动
sumimg的博客
03-14 1613
<span @click="sectionChange(child)"></span> sectionChange(child) { const scrollBox = document.querySelector('.report-detail-module') // 容器 let distance = scrollBox.scrollTop const curTag = document.querySelector('#' + child.s
vue中实现锚点定位以及平滑滚动到指定位置
重楼的博客
10-10 2万+
Vue锚点定位传统方式遇到的问题解决办法scrollTop或者scrollIntoView 传统方式遇到的问题 原生网页做锚点跳转一般使用id和a标签的href实现: <h1 id="title">title</h1> <a href="#title">跳转到title</a> 在Vue-router中，如果使用的是history模式，当点击超链接时，URL地址会加上#title，导致hash值改变,导致需要多次点击返回才能返回到上一页面。 解决办法 scr
vue锚点定位双向滚动
07-27
Vue锚点定位双向滚动是一种实现在页面中点击锚点链接时，页面能够滚动到对应位置的功能。这个功能可以通过监听滚动事件和使用ref属性来实现。首先，在左边的内容模块中给每个模块添加一个ref属性和相同的class类名，以便获取对应的DOM元素。然后，在内容区域添加滑动事件@scroll="handleScroll"，当内容区域滑动时触发handleScroll方法。接下来，在右边的锚点链接中添加点击事件@click="goAnchor('anchor-' + index, index)"，当点击锚点链接时，调用goAnchor方法获取对应的DOM元素。在goAnchor方法中，可以使用scrollIntoView方法将对应的DOM元素滚动到可视区域内实现双向滚动效果。这样，当点击锚点链接时，页面会滚动到对应的位置。 #### 引用[.reference_title] - *1* [vue：实现锚点双向滚动/文章章节联动滚动效果](https://blog.csdn.net/qq_36604536/article/details/126936016)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue 双向锚点实现 简易版（scrollIntoView）](https://blog.csdn.net/weixin_47978760/article/details/127808313)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值