回到顶部，这个功能基本每个长页面都会有，用户体验很好，主要是为了用户在浏览到网页底部的时候，能够快速地返回顶部去使用导航等重要功能。试想一下，如果在看一篇很长的文章，当看到底部的时候，想换一篇文章看，却要不断地滑动着鼠标的滚轮回到顶部找到导航……这得是惹让人烦的事啊。这一章就教大家如何使用axure8.0制作回到顶部功能。

第一步：拖拉摆放好“回到顶部”的相关控件

第一个页面“回到顶部”，包括网页头部和网页主体两部分。头部是一个800X96白底黑框的矩形，上面放一个logo和两行文字。主体就是一个800X366的内联框架

第二步：拖拉摆放好“页面内容”的相关控件

1、一些灰色方框，以代表网页内容，但要注意摆放x轴的距离以及y轴的长度，保证“回到顶部”页面中的内联框架不出现横向的滚动条并且一定要出现纵向滚动条（主要是为了能够体现回到顶部的效果）；

2、一条水平线放在y轴为0的位置，命名为“顶部”；

3、一个50X50的动态面板放在右下角，命名为“回到顶部”，动态面板的state1面板状态中，放置一个50X50灰底的框以及一个向上的白色尖头。

第三步：为内联框架添加链接属性

设置内联框架链接到“页面内容”

第四步：为“回到顶部”右键设置固定到浏览器

设置固定到浏览器，水平固定位置右边距15，垂直固定位置下边距15，始终保持顶层

第五步：为“回到顶部”添加鼠标点击时用例

垂直滚动到“顶部”，线性动画，500毫秒

点击预览，然后点击右下角的回到顶部，就可以看到回到顶部的效果了。同时也可以随时关注我的个人博客：http://niubipm.cn，因为工作过程中有很多这些axure原型设计小技巧的例子，所以我会坚持分享下去，希望对大家有帮助，你们对我的关注就是我的动力。

效果图：axure原型设计之回到顶部

更多原型案例：http://niubipm.cn

作者：牛B产品经理

转载请注明出处：http://niubipm.cn/a/chanpinsheji/Axure/2018/0505/181.html