vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例


Posted in Javascript onNovember 13, 2019

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

vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

完成这个功能需要注意:

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

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

代码如下:

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

<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+导航锚点联动-滚动监听和点击平滑滚动跳转实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
jquery 插件学习(一)
Aug 06 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
layui 表单标签的校验方法
Sep 04 Javascript
jquery获取input输入框中的值
Nov 13 #jQuery
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 #Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 #Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 #Javascript
vue 解除鼠标的监听事件的方法
Nov 13 #Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 #Javascript
element实现合并单元格通用方法
Nov 13 #Javascript
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
event.X和event.clientX的区别分析
2011/10/06 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
2019/11/06 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
下载糗事百科的内容_python版
2008/12/07 Python
Python psutil模块简单使用实例
2015/04/28 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python3爬楼梯算法示例
2019/03/04 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
教堂婚礼主持词
2014/03/14 职场文书
关于运动会的口号
2014/06/07 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
个人典型事迹材料
2014/12/30 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
python字符串的多行输出的实例详解
2021/06/08 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL