服务器之家

服务器之家 > 正文

vue 导航锚点_点击平滑滚动,导航栏对应变化详解

时间:2021-08-17 16:24     来源/作者:是我别出声

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

vue 导航锚点_点击平滑滚动,导航栏对应变化详解

完成这个功能需要注意:

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

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

代码如下:

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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)

?
1
2
3
4
5
6
7
8
9
10
11
// 跳转
  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里

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 获取滚动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 导航锚点_点击平滑滚动,导航栏对应变化详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/liona_koukou/article/details/86087821

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部