个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
26
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章vue 导航锚点_点击平滑滚动,导航栏对应变化详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
最终效果如下：（注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内）-chrome 。
完成这个功能需要注意:
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 。
最后此篇关于vue 导航锚点_点击平滑滚动,导航栏对应变化详解的文章就讲到这里了,如果你想了解更多关于vue 导航锚点_点击平滑滚动,导航栏对应变化详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
26
4
0
我想检查我的应用程序或系统中是否存在库。在 Java 中，我通常执行 System.loadlibrary，但是有谁知道 C 中类似的相应调用吗？ 最佳答案 是dlopen打开一个库，dlsym 从加
我在 typescript 中输入以下内容 export type Excludable = T & { isExcluded?: boolean } 其中过滤值: export type Filte
我最近在我的应用程序中添加了一种方法，可以自动格式化 TextView ，从“50000”到“50,000”，效果绝对完美。现在我遇到的问题是，在我的应用程序中，有多个按钮功能可以从该 TextVie
SELECT * FROM conversations WHERE chatMembers LIKE '%1%'AND chatMembers LIKE '%10%' 对话表 id | chatMem
我正在编写一个需要将 Java Date() 值保存到 MySQL 数据库的 RESTful Web 服务，但是，我不确定 MySQL 中可以保存 Java Date() 的数据类型是什么，或者我是否
同样，在任何 Red Hat 或 JBoss 站点上都没有关于此的信息，所以我在这里问... 我不确定是 13 还是 14。 最佳答案 Mapping the Community versions w
同样，在任何 Red Hat 或 JBoss 站点上都没有关于此的信息，所以我在这里问... 我不确定是 13 还是 14。 最佳答案 Mapping the Community versions w
我曾尝试使用 swift 开发一款利用 iPhone 的 3D 触摸硬件的游戏。然而，当我将我的应用程序提交到 App Store 时，它被拒绝了，因为该游戏无法在 iPad 上玩。 我的问题是，
Qt 的有序关联容器对应项 std::map是QMap , std::set是QSet , 对于无序关联容器 std::unordered_map是QHash . 我应该用什么来代替std::unor
JavaScript 方法 String.fromCharCode() 在以下意义上与 Python 的 unichar() 等效: print unichr(213) # prints Õ on t
正如谷歌在 "Discontinuing support for JSON-RPC and Global HTTP Batch Endpoints" 中提到的那样，Google API 客户端库已重新
我正在使用 MapLayer 和 MapOverlay 在 map 中创建自己的路径/折线，GPS 捕获的所有点都存储在一个结构中，以便我可以访问它们。随时。 现在，我希望路径在用户操作 map (缩
我们使用 Adobe Flash Builder 创建由 Flex 提供支持的交互式 Web 应用程序。现在我们正在寻找替代方案，让我们在 UI 设计和迎合 HTML5 的编码方面拥有同样的开发便
我想知道Android/Java 中类似C#/C++ 中的GetTickCount 方法的相应方法吗？ 最佳答案 Android 为 SystemClock.uptimeMillis() .请注意，u
我用 Vue + Phaser 开始了新项目，但是当我尝试加载 Assets 时，this.game.load.image 中的“load”和“add”返回“undefined”。我尝试从 JS 文件
我是一名优秀的程序员,十分优秀！