Axure制作回到顶部的网页交互

  1. 打开Axure软件,新建一个母版,母版名称命名为“回到顶部”

    Axure制作回到顶部的网页交互

  2. 向母版画布区拖入热区和自定义回到顶部控件,分别命名为 顶部热区 和 回到顶部。热区控件x,y坐标设置为0,0
  3. 将自定义回到顶部控件设置为 动态面板,命名为 顶部面板
  4. 双击顶部面板进入自定义回到顶部控件操作区,新增 鼠标单击事件,在弹出用例编辑窗口,添加动作选择 链接/滚动到元件<锚链接>,配置动作选择 顶部热区控件且仅垂直滚动设置,动画可根据实际需要自行选择,确认提交。

    Axure制作回到顶部的网页交互

  5. 设置 自定义回到顶部控件可见性为 隐藏
  6. 选择 母版画布 交互事件为 窗口滚动时,在弹出用例编辑窗口选择 编辑条件,在条件设立窗口设置条件,窗口滚动距离大于500,显示回到顶部控件

    Axure制作回到顶部的网页交互

  7. 同样操作,设置窗口滚动距离小等于500,隐藏回到顶部控件

 hyu码友部落

Axure制作回到顶部的网页交互hyu码友部落

8. 鼠标右键 顶部面板 选择 固定到浏览器项,根据实际需求设置回到顶部控件位置hyu码友部落

Axure制作回到顶部的网页交互hyu码友部落

9.将回到顶部母版拖到需求网页页面,完成网页回到顶部交互效果hyu码友部落