Axure使用动态面板制作返回顶部按钮

Axure使用动态面板制作返回顶部按钮

我们在访问网站的时候,网页向下滑动浏览,会有一个返回顶部按钮,可以帮助你一键回到网页的顶部,无需再手动滑动网页,是一个很实用的按钮,而今天就来教大家使用Axure软件的动态面板实现返回顶部按钮的操作步骤。

1、我们先搭建一个简易的页面,然后放入一个矩形,改成箭头样式,并“转为动态面板“,命名为”back“。

2、点击动态面板属性中的“固定到浏览器“,打开设置界面;

3、勾选“固定到浏览器窗口“的复选框,开启设置选项;

4、水平固定中选择“右“,并设置边距为”100“px;

5、水平固定中选择“底部“,并设置边距为”10“px。

Axure固定到浏览器

然后,添加“返回顶部“按钮【鼠标单击时】事件的用例动作;因为当前动态面板中只有一个元件,所以【鼠标单击时】的事件可以用矩形也可以用动态面板。这里我们使用动态面板的触发事件。如果要滚动回顶部,我们需要用一个元件在顶部进行位置定位,滚动时滚动到这个元件的位置上。页面中,有一个文字为“顶部导航“的占位符元件,它的y轴坐标为”0“,就是在顶部的位置,我们就用它进行顶部位置的定位。我们为“顶部导航“这个元件命名为”top“,并在用例编辑界面中选择动作”滚动到元件<锚链接>“后,勾选这个元件。在接下来的选项中我们勾选”仅垂直滚动“,如果需要滚动回顶部时有动态的效果,可以继续选择【动画】中的”线性“效果,时间为默认的”500“毫秒即可。这样就是一个500毫秒匀速滚动回顶部的效果。

Axure添加按钮

其实,Axure“固定到浏览器“这个功能,并不是把元件在绝对位置固定,它是相对于浏览器的固定,对于页面来说其实元件是在随着页面的滚动而反向移动,形成了一个停留在原位置的视觉效果。所以它是相对固定,相对于浏览器边框的固定。

以上内容就是使用动态面板制作网上页上的返回顶部按钮的方法,更多教程,点击文章:Axure如何在局域网编辑团队项目

1 comment so far

Axure生成的html原型如何导入到手机 | Axure 中文网Posted on9:19 上午 - 1月 16, 2019

[…] 以上内容就是使用Axure生成网页原型在没有网络的情况下浏览原型的操作方法,更多感兴趣的教程,点击文章:Axure使用动态面板制作返回顶部按钮。 […]

在线客服
客服邮箱
客服电话
17051276424