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的动态创建DOM元素的代码
Dec 28 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
JS显示表格内指定行html代码的方法
Mar 31 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
vue实现淘宝购物车功能
Apr 20 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调用Twitter的RSS的实现代码
2010/03/10 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
PHP概率计算函数汇总
2015/09/13 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
csdn 博客的css样式 v3
2009/02/24 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
python爬取m3u8连接的视频
2018/02/28 Python
python2.7安装图文教程
2018/03/13 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python的移位操作实现详解
2019/08/21 Python
Django学习之文件上传与下载
2019/10/06 Python
python 通过exifread读取照片信息
2020/12/24 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
《一件运动衫》教学反思
2014/02/19 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
解除劳动合同证明书
2014/09/26 职场文书
党员检讨书范文
2014/12/27 职场文书
公司新员工欢迎词
2015/09/30 职场文书
社区志愿者服务心得体会
2016/01/22 职场文书
合同补充协议书
2016/03/24 职场文书