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


Posted in Javascript onAugust 10, 2020

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

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

完成这个功能需要注意:

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.pathName,item.menuCode)">
       <img src="">
       <span>{{ item.name }}</span>
       <template v-if="showEdit">
        <i v-if="addOrRemove(item.menuCode)==0" class="el-icon-circle-plus add-btn" @click="addMenu(item.menuCode)" />
        <i v-if="addOrRemove(item.menuCode)==1" class="el-icon-remove remove-btn" @click="removeMenu(item.menuCode)" />
       </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 = document.getElementById('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 导航锚点_点击平滑滚动,导航栏对应变化详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
Node.js实现文件上传
Jul 05 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
vue 如何从单页应用改造成多页应用
Oct 23 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 #Javascript
vue 实现锚点功能操作
Aug 10 #Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 #Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 #Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 #Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 #Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 #Javascript
You might like
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
python 文件和路径操作函数小结
2009/11/23 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
python从入门到精通(DAY 2)
2015/12/20 Python
Python操作Excel之xlsx文件
2017/03/24 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
电子商务网站的创业计划书
2014/01/05 职场文书
致100米运动员广播稿
2014/02/14 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
应聘教师自荐信
2015/03/26 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
详解Python描述符的工作原理
2021/06/11 Python