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 相关文章推荐
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 Javascript
javascript包装对象实例分析
Mar 27 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
Banner程序
2006/10/09 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php二分查找二种实现示例
2014/03/12 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
jquery选择器简述
2015/08/31 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
pandas实现选取特定索引的行
2018/04/20 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
pytorch 修改预训练model实例
2020/01/18 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
python实现猜数游戏
2020/03/27 Python
django rest framework使用django-filter用法
2020/07/15 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
教师现实表现材料
2014/02/14 职场文书
《乞巧》教学反思
2014/02/27 职场文书
生育关怀行动实施方案
2014/03/26 职场文书
委托公证书
2014/04/08 职场文书
会议室管理制度范本
2015/08/06 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript