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 相关文章推荐
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
VueX模块的具体使用(小白教程)
Jun 05 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
vue中轮训器的使用
2019/01/27 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
秋游活动策划方案
2014/02/16 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
债务授权委托书范本
2014/10/17 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
2016公司年会主持词
2015/07/01 职场文书
升学宴学生致辞
2015/09/29 职场文书
导游词之桂林山水
2019/09/20 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python