vue页面实现锚点定位

html代码：

 <div @scroll="scrollEvent">/****目录部分***/<ul class="titless"><li v-for="(titleItems,index) in titleList" :key="index" :class="titleOnIndex === index ? 'active' : ''" @click="jump(index)">{{ titleItems.title }}</li></ul>/**** 内容部分 ****/<div class="overflow"><div v-for="(item0,index1) in dest1" :key="index1" class="slideShow d_jump"><div class="logical-slide-show"><div class="titles">{{ item0.name }}</div><ul class="yyc-li0-list yyc-li1-list"><li><img src="./img/iconImg6.png"><span class="zb-div-span-auto-line">{{ item0.label }}</span></li></ul></div></div></div></div>

数据：

titleOnIndex： 0，titleList: [{title: '业务应用BIZ'},{title: '贴源区ODS'},{title: '管理支撑SUP'},{title: '主题区DW'},{title: '专题区ADS'},{title: '前置交换区 PRE'},{title: '公共基础区 PUB'},{title: '地理空间区 GEO'},{title: '元数据META'}]

css代码：

目录部分.titless {width: 6.5rem;position: fixed;left: 1rem;top: 14.2%;bottom: 0.75rem;text-align: center;background: url(./img/iconImg0.png) top center no-repeat;background-size: 100% 100%;z-index: 99999999;li{height: 1.95rem;line-height: 1.95rem;padding: 0 .25rem;font-size: 0.55rem /* 22/40 */;font-family: Source Han Sans CN;font-weight: bold;color: #ffffff;cursor: pointer;}.active{background: #205373;cursor: pointer;color:#00ffff;}}

锚点定位方法：

 /* 监听滚动(结合前面的@scroll) */scrollEvent(e) {let scrollItems = document.querySelectorAll('.d_jump')for (let i = scrollItems.length - 1; i >= 0; i--) {// 判断滚动条滚动距离是否大于当前滚动项可滚动距离let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTopif (judge) {this.catalogCur = ibreak}}// 滚动条触底了if (e.srcElement.scrollTop + e.srcElement.offsetHeight === e.srcElement.scrollHeight) {this.catalogCur = this.articleName.length - 1}console.log(e.srcElement.scrollTop)// 滚动条高度console.log(e.srcElement.offsetHeight)// 屏幕高度console.log(e.srcElement.scrollHeight)// 内容高度// '下拉获取更多'的功能(还有10像素就触发)：滚动的像素+容器的高度>可滚动的总高度-10像素},/* 目录点击定位效果：有兼容问题，借鉴了很多其他方法却一直不成功，无奈之后使用了scrollIntoView */jump (index) {debuggerthis.titleOnIndex = indexlet jump = document.querySelectorAll('.d_jump')jump[index].scrollIntoView({ block: 'start', behavior: 'smooth' })}

效果如下：

vue页面实现锚点定位相关推荐

vue中实现锚点定位
vue中实现锚点定位通过监听滚动事件,高亮显示锚点按钮添加点击事件,根据锚点滚动至对应区域并实现平滑滚动这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的 ...
页面内锚点定位及其跳转
一.前言这篇文章我们来看一个网页中常用的小功能--锚点定位及其跳转.简单理解,这个功能就是点击"目录"中相应的"标题",对应"滚动跳转"到 ...
html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html> <html> <head> & ...
html锚点定位原理,html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用标签,在href属性中写入DIV的id.如下: to div1 to div2 to div3 div1 div2 div3 这种方法的缺点是点击锚点之后,浏览器的 ...
vue中实现锚点定位平滑滚动
下面是简单的代码,拿来即用 html//给div盒子设定单击事件和ref名 <div @click="getThere" ref="cat_box"> ...
vue中实现锚点定位以及平滑滚动到指定位置
这里主要是实现了一个简单的滚动触发锚点高亮,以及点击锚点触发滚动的功能如果是获取浏览器的滚动高度,各个浏览器有所差异,使用以下几种方式: Chrome: document.body.scrollTo ...
Android 实现锚点定位
相信做前端的都做过页面锚点定位的功能,通过<a href="#head"> 去设置页面内锚点定位跳转. 本篇文章就使用tablayout.scrollview来实现an ...
html增加锚点,html增加锚点定位
第一种方法,也是最简单的方法是锚点用标签,在href属性中写入DIV的id.如下: div { height: 800px; width: 400px; border: 2px solid black ...
vue页面锚文本_Vue如何实现锚点定位功能？
整个链路应该是这样的,用户在消息中心中看到回复自己的信息,点进去后会跳到视频播放页面,页面url中会带上此次消息的replyId(就简称rid吧),然后接下来的问题就是有两个,一个是评论本身是分页的, ...

vue页面实现锚点定位

vue页面实现锚点定位相关推荐

最新文章

热门文章