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 相关文章推荐
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
js实现自定义滚动条的示例
Oct 27 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
Python yield使用方法示例
2013/12/04 Python
python实现redis三种cas事务操作
2017/12/19 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
解决Keras 与 Tensorflow 版本之间的兼容性问题
2020/02/07 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
基于python实现地址和经纬度转换
2020/05/19 Python
Python读写压缩文件的方法
2020/07/30 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
幼儿园中秋节活动方案
2014/02/06 职场文书
学生打架检讨书
2014/02/14 职场文书
《火烧云》教学反思
2014/04/12 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
医生辞职信范文
2015/03/02 职场文书