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

2024-10-29 10:35:18

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

完成这个功能需要注意：

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

Vue监听滚动实现锚点定位(双向)示例

在项目需求中需要实现一个滚轴联动锚点的功能效果图如下: 功能代码demo如下: <template> <div class="container"> <div class="wrapper"> <div class="section" style="height:500px;width:100%" v-for="(item, index) in list" :ke
详解Vue项目中实现锚点定位

背景今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面. 解决最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果. <template> <div class="score-preview-container"> <div class="content-box"> <div class=&q
Vue.js实战之通过监听滚动事件实现动态锚点

前言前几天工作中在做项目的时候,需要实现一个动态锚点的效果,具体效果如下: 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现在实现平滑滚动之前,得先确保基本的锚点功能如果没有其他要求,直接用
vue项目中锚点定位替代方式

在vue项目中,使用锚点定位会和router的规则冲突,在项目中的表现就是第一次点击url改变了,但是没有跳转到锚点位置,再次点击才会跳转.所以在vue项目中定义一个方法不适用锚点定位: scrollToSection() { let section = document.getElementById('section') if (section) { section.scrollIntoView() } } html标签中绑定click事件就可以了以上这篇vue项目中锚点定位替代方式就是小编
浅谈vue 锚点指令v-anchor的使用

如下所示: export default { inserted: function(el, binding) { el.onclick = function() { let total; if (binding.value == 0) { total = 0; } else { total = document.getElementById(`anchor-${binding.value}`).offsetTop; } let distance = document.documentElemen
vue2.0模拟锚点的实例

在vue项目中,因为采用路由跳转,会导致无法使用常规的a标签配合ID的锚点功能. 解决办法: <a href="javascript:void(0)" rel="external nofollow" @click="goAnchor('#anchor')"> 灰啊灰啊我的骄傲放纵</a> methods: { goAnchor(selector) { var anchor = this.$el.querySelector(
vue中锚点的三种方法

第一种: router.js中添加 mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return { selector:to.hash } } } 组件: <template> <div> <ul class="list"> <li><a href="#1" rel="external nofollow"
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1.点击导航平滑滚动到导航内容处 2.div内滚动时当前导航需要做响应代码如下: 1.html结构(因为从项目里截取代码数据内容就不贴出来了,不算难点,这个可以根据自己的项目进行调整,相应的方法和类名别弄错就行) <div class="all-title"> 全部应用 <p class="fr"> <span v-
Bootstrap教程JS插件滚动监听学习笔记分享

本文主要来学习一下JavaScript插件--滚动监听. 1.案例滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.你可以试试滚动这个页面,看看左侧导航的变化. 先把实现的代码上了,你可以通过测试代码先来看看效果. <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=de
VUE 实现滚动监听导航栏置顶的方法

HTML 非重点的代码,比如样式啥的,我就不放上来了,一笔带过简略的写一下html代码,可以对照文章最后的效果图看,应该不难理解 <div :style="{ paddingBottom: paddingBottom}"> <header>资源信息</header> <div>  </div> <div id="fixedBar" :class=&quo
vue实现锚点跳转及滚动监听的方法

vue中实现锚点跳转以及滚动监听跳转到相应标签的方法,供大家参考,具体内容如下 *注意·如果scroll-item的最后一个元素高度必须大于等于滚动区域的高度,不然最后一个元素就滚动不上去, scrollIntoView接口的具体参数说明实际效果图代码结构 // Html结构 <template> <div> <div class="list"> <ul> <li v-for="
vue 导航锚点_点击平滑滚动,导航栏对应变化详解

最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1.点击导航平滑滚动到导航内容处 2.div内滚动时当前导航需要做响应代码如下: 1.html结构(因为从项目里截取代码,allMenuList数据内容就不贴出来了,不算难点,这个可以根据自己的项目进行调整,相应的方法和类名别弄错就行) <div class="all-title"> 全部应用 <p class="fr">
jQuery滚动监听实现商城楼梯式导航效果

话不多说,上局部效果图: html结构,左侧定位的导航需要一个ul,中间内容,我是直接截得图片,为了效果省事,也是用的ul,最后你们要用的话也可以用ul,或者div,但是每个区域得是一个div,例如,精选的放一个div,女装的放一个div,所有的区域都套在一个大的div里面,也就是类似于ul>li的结构(只提供html结构和jQuery,样式的话根据设计稿): <div class="menu"> <ul> <li class="on&qu
vue监听滚动事件实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码

utils/index,.js /** * 生成UUID * @param withSeparator 是否有分割符 * @returns {string} */ export function generateUUID(withSeparator = true) { let d = new Date().getTime() if (window.performance && typeof window.performance.now === 'function') { d += perf
jQuery实现可兼容IE6的滚动监听功能

本文实例讲述了jQuery实现可兼容IE6的滚动监听功能.分享给大家供大家参考,具体如下: 其实这东西本打算用原生的javascript来写,但是原生的javascript取class与监听滚动条的滚动过于麻烦,因此上了jQuery,没关系,反正兼容IE6就行. 将实现如下的效果: 也就是在网页中有点常见的滚动监听.相应的标题,滚到哪里,则左边的滚动条当前标题前的...就变成>>>,,当然了,左边的标题同样是可以点击,马上滚到该滚的地方. 首先是网页布局部分,代码如下,请忽略大堆的Jav
学习Bootstrap滚动监听附调用方法

本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下滚动监听伴随着滚动条的滚动,列表项被不断切换激活   <div id="menu" class="navbar navbar-fixed-to

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

相关推荐

随机推荐