vue导航锚点_点击平滑滚动，导航栏对应变化详解
最终效果如下：（注意需要做锚点联动的部分并不在页⾯的顶部⽽是页⾯的某个div内）-chrome
完成这个功能需要注意：
1、点击导航平滑滚动到导航内容处
2、div内滚动时当前导航需要做响应
代码如下：
1、html结构（因为从项⽬⾥截取代码，allMenuList数据内容就不贴出来了，不算难点，这个可以根据⾃⼰的项⽬进⾏调整，相应的⽅法和类名别弄错就⾏）
<div class="all-title">
全部应⽤
<p class="fr">
<span v-for="(item, index) in allMenuList" :key="item.id" :class="[index===activeMenu?'active':'']" @click="jump(index)">{{ item.name }}</span>    </p>
</div>
<div id="scrollBox" class="applications-content">
<div v-for="(val, index) in allMenuList" :key="val.id" class="all-list do-jump">
<p class="applications-title">{{ val.name }}</p>
<ul class="applications-list">
<li v-for="item in val.children" :key="item.id" class="applications-item" @click="changeRouterForRight(item.uCode)">
<img src="">
<span>{{ item.name }}</span>js导航栏下拉菜单
<template v-if="showEdit">
<i v-if="uCode)==0" class="el-icon-circle-plus add-btn" @click="uCode)" />
<i v-if="uCode)==1" class="el-icon-remove remove-btn" @click="removeMe
uCode)" />
</template>
</li>
</ul>
</div>
</div>
需要说明的数据：activeMenu-当前导航序号，scrollBox-需要在⾥⾯滚动的元素即设为overflow-y:scroll的⽗元素div
2、点击导航平滑滚动的⽅法：jump(index)
// 跳转
jump(index) {
this.activeMenu = index // 当前导航
const jump = jQuery('.do-jump').eq(index)
const scrollTop = jump.position().top + this.scrollBox.scrollTop // 获取需要滚动的距离
// Chrome
this.scrollBox.scrollTo({
top: scrollTop,
behavior: 'smooth' // 平滑滚动
})
}
这⾥有两点需要说明：⼀是因为我vue项⽬⾥装了jquery所以这⾥直接⽤了jquery的position().top来获取元素到⽗元素的距离，如果项⽬⾥没装jquery需要把这⾥换成js的⽅法来获取元素到⽗元素的距离（万事有Google和度娘），⼆是点击之后需要滚动的距离计算时别忘了加上当前div已经滚动的距离即已经被卷起的⾼度
-
----到这⾥我们就可以实现1的功能
3、监听scrollBox的滚动：
写在mounted⾥
// 获取滚动dom元素
this.scrollBox = ElementById('scrollBox')
const jump = jQuery('.do-jump')
const topArr = []
for (let i = 0; i < jump.length; i++) {
topArr.push(jump.eq(i).position().top)
}
// 监听dom元素的scroll事件
this.scrollBox.addEventListener('scroll', () => {
const current_offset_top = that.scrollBox.scrollTop
for (let i = 0; i < topArr.length; i++) {
if (current_offset_top <= topArr[i]) { // 根据滚动距离判断应该滚动到第⼏个导航的位置
that.activeMenu = i
break
}
}
}, true)
这⾥需要注意addEventListener⾥有三个参数：'scroll' 、function、true
补充知识：vue搭建脚⼿架报错：rollbackFailedOptinal:verb npm-session解决
vue搭建脚⼿架报错：
rollbackFailedOptinal:verb npm-session
解决
如果你是在公司，⽽你的公司⼜⽤了代理连的外⽹
想办法直接连外⽹吧，问题就是代理造成的
我⽤⼿机连电脑USB共享⽹络哎，⼼好累
以上这篇vue 导航锚点_点击平滑滚动，导航栏对应变化详解就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。