说到页面锚点你肯定会说这个简单。无论是码农的一个代码还是Axure中自带的链接动作Scroll to widget都可以简单而快速地通过点击锚点目录实现页面锚点位的跳转。但这就完了吗其实你只完成了50%的交互。还有50%的交互需要实现页面上下滚动时锚点目录的选中状态随着锚点位的变化而协同变化。接下来我们一起看看100%的页面锚点交互效果和实现方法。1️⃣先看效果点击左侧锚点目录可以控制右侧区域直接跳转到对应锚点位。鼠标在右侧区域上下滚动时当不同锚点位出现在主显示位时左侧锚点目录的选中状态也能自动匹配上。2️⃣再看实现方法总体来说上面的示例可以分为两部分左侧锚点目录和右侧锚点区域。锚点目录描点目录由普通的矩形块以及矩形块上的点击交互事件组成。这里的锚点目录项由单独的矩形块构成之所以没有用中继器简化这个目录结构是因为Scroll to widget交互动作必须选中具体的组件对象不能用变量代替这些组件。锚点目录项的交互事件非常简单重点就在Scroll to widget交互动作上。该动作上的交互动画效果可以根据自己的喜好调整这里我建议选择纵向vertically线性变化linear动画效果时间在300ms以内。锚点区域锚点区域由动态面板和锚点位板块组成锚点位板块包裹在动态面板中锚点位滚动的交互事件设置在动态面板上。将每一个锚点位板块包装成一个组合这样方便查看。每一个锚点位板块内都会包含板块标题和板块背景板其余内容根据实际的需求设计。每个板块之间间隔一个标准距离我的示例中是10。滚动动态面板只有动态面板有滚动交互事件其他组件或组合是没有滚动事件的也即锚点区域利用滚动轴纵坐标值scrollY处于锚点板块中的某部分位置为判定条件确定选中该锚点板块对应的锚点目录。我的示例设定的是锚点板块纵坐标值之上的10个单位到锚点板块标题的底部纵坐标值。以“推广目的”板块为例起始的纵坐标值是“推广目的”板块起点纵坐标值-10也即起点纵坐标上方10个单位的位置。终止的纵坐标值是“推广目的”板块内标题的底部纵坐标值也即标题的起点纵坐标标题高度。上图的虚线范围可以更好地反映示例中滚动事件触发锚点目录状态变更的判定区域。3️⃣来个总结由锚点目录交互事件锚点区域滚动事件的锚点交互组件才完整。锚点目录的交互动作非常简单直接利用Scroll to widget交互动作即可完成。由于Scroll to widget交互动作不支持变量代替锚点位组件名所以还无法利用中继器制作锚点目录。希望以后的版本可以支持锚点区域的滚动事件需要借助动态面板的滚动事件来完成具体的锚点目录状态变更的激活区域可以根据实际设计需求定义。⭐原型体验地址原型体验地址在线预览【02Frame框架-024组件-锚点】