在很多网站上都有一个“返回顶部“的按钮。不管屏幕怎么滚动,返回顶部按钮一直悬浮在固定位置,随时待命。一旦你点击它,他就像小火箭一样,嗖的一下,页面就回到页面顶部了!那么这个效果用Axure怎么实现呢?以下是来自小楼老师的一篇教程,赶紧来学一下吧!
Axure动态面板的属性中有个功能,叫“固定到浏览器”,这个功能也可以在动态面板的右键菜单中选择。
如果我们希望页面上的某个部分,在页面滚动时保持在原位不动,就需要用到“固定到浏览器”的这个功能。
比如,一个“返回顶部“的按钮一直固定在页面右下方,距离浏览器右边框100像素和下边框10像素的位置上。点击这个按钮时,整个页面滚动回顶部。这样的效果就需要用到上面提到的功能。
其实,Axure“固定到浏览器“这个功能,并不是把元件在绝对位置固定,它是相对于浏览器的固定,对于页面来说其实元件是在随着页面的滚动而反向移动,形成了一个停留在原位置的视觉效果。所以它是相对固定,相对于浏览器边框的固定。
知道了原理,我们来实现上面说到的这个效果。
Axure案例:固定位置的返回顶部按钮
首先,我们先完成固定按钮位置。(图151)
1、我们先搭建一个简易的页面,然后放入一个矩形,改成箭头样式,并“转为动态面板“,命名为”back“。
2、点击动态面板属性中的“固定到浏览器“,打开设置界面;
3、勾选“固定到浏览器窗口“的复选框,开启设置选项;
4、水平固定中选择“右“,并设置边距为”100“px;
5、水平固定中选择“底部“,并设置边距为”10“px。
(图151)
然后,添加“返回顶部“按钮【鼠标单击时】事件的用例动作;因为当前动态面板中只有一个元件,所以【鼠标单击时】的事件可以用矩形也可以用动态面板。这里我们使用动态面板的触发事件。
如果要滚动回顶部,我们需要用一个元件在顶部进行位置定位,滚动时滚动到这个元件的位置上。页面中,有一个文字为“顶部导航“的占位符元件,它的y轴坐标为”0“,就是在顶部的位置,我们就用它进行顶部位置的定位。
我们为“顶部导航“这个元件命名为”top“,并在用例编辑界面中选择动作”滚动到元件<锚链接>“后,勾选这个元件。在接下来的选项中我们勾选”仅垂直滚动“,如果需要滚动回顶部时有动态的效果,可以继续选择【动画】中的”线性“效果,时间为默认的”500“毫秒即可。这样就是一个500毫秒匀速滚动回顶部的效果。(图152)
(图152)
本文转载自小楼老师的博客:http://www.iaxure.com/3121.html
太牛了