锚点导航菜单又沉锚点菜单或者锚链接菜单，当一个页面较长时，往往都需要使用锚点导航菜单，我们最常使用的锚点导航菜单，其实就是word里面的导航菜单，他能够快速帮我们找到对应的内容，提高我们的浏览效率。

所以本期就教大家如何在Axure里面制作一个高保真的锚点菜单。

一、制作完成后应具备以下效果

1. 固定效果：锚点导航菜单固定在屏幕，无论页面在什么位置，都可以快速点击

2. 锚点效果：点击锚点导航菜单，页面快熟滚动到对应的位置

3. 回显效果：页面滚动到对应内容时，在锚点导航菜单中显示，可以清晰的知道阅读的位置。

【原型预览】

https://axhub.im/ax9/87f992dcedefa847/#g=1&id=pyby62&p=%E5%8F%B3%E4%BE%A7%E9%94%9A%E7%82%B9%E8%8F%9C%E5%8D%95

【原型下载】

方式1：加入原型分享群后，可免费下载使用原型，请咨询微信522073109

方式2： https://weidian.com/item.html?itemID=3622372069

二、制作材料准备

1、菜单材料

菜单由多个文本标签和背景矩形制作而成

菜单标题——由多个文本标签制作而成，一个标签对应一个标题，设置选中样式为：填充颜色为蓝色，文字颜色为白色。设置为单选组，第一个标签默认选中，因为一开始是在页面的最顶端，然后一个个排列好即可。

背景矩形——作为背景使用，至于底层，填充颜色为白色，增加边线

动态面板——将上面所有标题的文本标签和背景矩形一起转为动态面板，转为动态面板后可以固定在浏览器，垂直方向规定在中部，水平方向固定在右侧

2、内容材料

内容材料主要由标题和对应的其他内容组成

内容标题——文本标签，同样是一个文本标签对应一个标题，这里标题的内容最好和上面菜单标题的内容一一对应，不然容易混淆。这里的标题可以说就是锚点了，后续会增加交互，鼠标点击菜单标题时，页面滑动到对应的标题。另外我们在标题前面也可以增加图标来美化。

其他内容——这里就是放你们标题对应要展示的内容，你们根据实际需要放置即可。

将上述内容摆放到对应位置就完成所有材料的准备了，完成后大致如下图所示：

在窗口滚动时，我们要根据窗口滚动到不同的位置，选中对应的标题。

这里我们就需要用到函数来计算了，首先和大家介绍两个函数：

Window.scrollY——这个函数可以获取页面垂直滚动的距离

Window.height——这个函数可以获取窗口的高度

那么我们怎么知道什么时候该选中哪个标题呢？我们以标题2来举例说明：

如果Window.scrollY（页面垂直滑动的距离）大于内容标题2所在的y坐标值减去屏幕的一半，那就选中标题2。

为了大家更加容易理解，可以参考下图，红线的位置为屏幕一半的位置，如果内容标题文字2在红线上方，就表示标题文字2的内容超过屏幕的一半，所以我们选中标题02，如果在下方就表示不超过屏幕一半，主题内容还是在标题01上，所以我们就选中标题01。

当然了上面只是个别标题的分析，我们要从最后一个标题的位置来写交互，案例中为标题20，如果Window.scrollY（页面垂直滑动的距离）大于内容标题20所在的y坐标值减去屏幕的一半，那就选中标题20；如果这个条件不成立，我们在判断标题19，如果标题19不成立再判断标题18……直到成立为止，这里面交互都可以复制粘贴的，我们只需要写好第一个，后面的只是简单的修改目标元件即可。

这样我们就完成了整个原型了，其实基本上第一次做出来之后，以后使用只需要替换标题文字和中间的内容就可以了直接出交互效果了，所以使用起来也算方便。

以上就是高保真原型——锚点导航菜单，制作方法了，感兴趣的同学们可以动手试试，谢谢您的阅读。

2. 元件库拖出一个动态面板，双击进入到动态面板，拖动一个矩形进去，命名为直播，然后复制矩形框，复制四个，然后分别改为动漫、番剧、漫画、音乐，然后给每个矩形框添加交互。 3.选中直播矩形框，新建交互——单击时——滚动到元件——（第一步中创建的直播矩形框）垂直方向，然后复制交互到动漫、番剧、漫画、音乐矩形框，把交互目标依次相对应的改为（第一步中创建的直动漫、番剧、国创、漫画矩形框）。最后全部选中矩形框添加交互样式，设置鼠标悬停填充颜色 必须在弹出窗口的交互框内才能进行父级窗口的交互设置，因为只有弹出窗口才有父级窗口。 锚点 ：点击某个 锚点 的时候，按照预先设置好的动画效果，移动到指定的位置去 可以在“概要”里面拖动元件上下，来控制他“图层”的高低 在使用 锚点 时，固定左边的 导航 框，可以右键选中“转换为动态面板 ”，然后再“样式”里面选择 固定到浏览器，例如下图的左边。（我的网易云课堂的课时29） 锚点 定位用于网站某一模块的定位，让用户能够通过 锚点 直接跳到相应模块，从而实现页面内跳转，常在网页内容较长时使用。多个 锚点 显示可用一个无序列表显示，利用 ul 和 li 标签，在 li 标签中使用 a 标签实现 锚点 。 1. 使用 div 包住 锚点 导航 栏，在其中放置列表 ul 和 li； 2. 在 li 标签中放置 a 标签，href 属性设置为 # 锚点 值 使其指向 锚点 处； 3. 设置多个 div 模块模拟网页内容； 4. 在 div 模块中设置 id 或在 div 模块中添加 a 标签并设置 3.双击动态面板，双击内联框架动态面板，下拉到段落三，选中置顶（TOP）按钮，在交互窗格点击新建交互，单击时，滚动到元件 “1”热区 垂直滚动 缓慢进入 500毫秒。9.在元件库中拖入一个内联框架，右键转为动态面板，将制作好的Banner（头图）段落内容复制粘贴到动态面板中，并删除内联框架动态面中的内联框架。2.选中段落二元件，在交互窗格点击新建交互，单击时，滚动到元件 “2”段落二 垂直滚动 缓慢进入 500毫秒，同理配置段落三。11.在元件库中拖入一个动态面板，将内联框架动态面板复制粘贴到动态面板中。 在Web开发中， 锚点 （Anchor）通常用于创建页面内的 导航 链接 ，使用户可以点击 链接 跳转到页面的特定部分。这通常通过HTML中的`id`属性和 链接 中的哈希片段实现。 在Vue3.js应用中，实现哈希模式的 锚点 导航 是一项常见而有用的功能。通过哈希模式，我们可以在页面间快速跳转，而无需重新加载整个页面，这对于提升用户体验尤为重要。本文将介绍如何在Vue应用中利用哈希模式实现 锚点 导航 ，并且结合CSDN的使用进行详细说明。首先，确保你的Vue项目已经初始化，并且已经安装了Vue Router。在Vue Router中，我们需要将路由模式设置为哈希模式。在创建Vue Router实例时，可以通过设置。