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

　　Axure动态面板的属性中有个功能，叫“固定到浏览器”，这个功能也可以在动态面板的右键菜单中选择。

　　如果我们希望页面上的某个部分，在页面滚动时保持在原位不动，就需要用到“固定到浏览器”的这个功能。

　　比如，一个“返回顶部“的按钮一直固定在页面右下方，距离浏览器右边框100像素和下边框10像素的位置上。点击这个按钮时，整个页面滚动回顶部。这样的效果就需要用到上面提到的功能。

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

　　知道了原理，我们来实现上面说到的这个效果。

　　Axure案例：固定位置的返回顶部按钮

　　首先，我们先完成固定按钮位置。

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

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

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

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

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

　　然后，添加“返回顶部“按钮【鼠标单击时】事件的用例动作;因为当前动态面板中只有一个元件，所以【鼠标单击时】的事件可以用矩形也可以用动态面板。这里我们使用动态面板的触发事件。

　　如果要滚动回顶部，我们需要用一个元件在顶部进行位置定位，滚动时滚动到这个元件的位置上。页面中，有一个文字为“顶部导航“的占位符元件，它的y轴坐标为”0“，就是在顶部的位置，我们就用它进行顶部位置的定位。

　　我们为“顶部导航“这个元件命名为”top“，并在用例编辑界面中选择动作”滚动到元件<锚链接>“后，勾选这个元件。在接下来的选项中我们勾选”仅垂直滚动“，如果需要滚动回顶部时有动态的效果，可以继续选择【动画】中的”线性“效果，时间为默认的”500“毫秒即可。这样就是一个500毫秒匀速滚动回顶部的效果。

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。