好资源导航 » 文章资讯 » vue 导航锚点_点击平滑滚动,导航栏对应变化详解

vue 导航锚点_点击平滑滚动,导航栏对应变化详解

2023-07-19 00:37:03 57

最终效果如下：（注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内）-chrome

完成这个功能需要注意：

1、点击导航平滑滚动到导航内容处

2、div内滚动时当前导航需要做响应

代码如下：

1、html结构（因为从项目里截取代码，allMenuList数据内容就不贴出来了，不算难点，这个可以根据自己的项目进行调整，相应的方法和类名别弄错就行）


全部应用

{{item.name}}

需要说明的数据：activeMenu-当前导航序号，scrollBox-需要在里面滚动的元素即设为overflow-y:scroll的父元素div

2、点击导航平滑滚动的方法：jump(index)

//跳转
jump(index){
this.activeMenu=index//当前导航
constjump=jQuery('.do-jump').eq(index)
constscrollTop=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=document.getElementById('scrollBox')
constjump=jQuery('.do-jump')
consttopArr=[]
for(leti=0;i{
constcurrent_offset_top=that.scrollBox.scrollTop
for(leti=0;i
这里需要注意addEventListener里有三个参数：'scroll'、function、true
补充知识：vue搭建脚手架报错：rollbackFailedOptinal:verbnpm-session解决
vue搭建脚手架报错：

rollbackFailedOptinal:verbnpm-session

解决
如果你是在公司，而你的公司又用了代理连的外网
想办法直接连外网吧，问题就是代理造成的
我用手机连电脑USB共享网络哎，心好累
以上这篇vue导航锚点_点击平滑滚动,导航栏对应变化详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue 导航锚点_点击平滑滚动,导航栏对应变化详解

热门推荐

随机推荐