回到頂部，這個功能基本每個長頁面都會有，用戶體驗很好，主要是為了用戶在瀏覽到網頁底部的時候，能夠快速地返回頂部去使用導航等重要功能。試想一下，如果在看一篇很長的文章，當看到底部的時候，想換一篇文章看，卻要不斷地滑動著鼠標的滾輪回到頂部找到導航……這得是惹讓人煩的事啊。這一章就教大家如何使用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
