起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程｜如何制作”返回頂部”原型功能？
以人人都是產品經理的首頁為例，進行“返回頂部”原型制作介紹：
1、在工作區拖入一個動態面板命名為top，根據通常返回頂部的按鈕在屏幕右下角的慣例設置top的X坐標和Y坐標，并在狀態1（stage1）里插入一張返回頂部的圖片，然后將動態面板top設置“固定到瀏覽器”，最后設置為”隱藏”備用。
2、再拖入一個動態面板命名為top_2，Y坐標與動態面板top一致，X坐標任意，但是不要與top重疊（我是直接將top_2放在了top的平行左邊的位置），且top_2中不放入任何元件，然后將動態面板top_2設置“固定到瀏覽器”后備用。
3、拖入一個熱區命名top_rq，X坐標與動態面板top_2的X坐標一致，Y坐標等于動態面板top_2的Y坐標加上動態面板top_2的高度(熱區top_rq的Y坐標的設置不固定，看你的動態面板top想在頁面滑動到什么位置開始顯示自定義設置)，寬度與動態面板top_2的寬度一致，高度直接拖到頁面最底部。
4、設置頁面交互（向下滑動顯示）
添加“頁面滾動時”事件，并添加兩個條件和相應的事件如下：
（1）添加條件：元件范圍 top_rp 接觸 元件范圍 top_2。
事件是：顯示top 逐漸 500ms。
（2）添加條件：元件范圍 top_rp 未接觸 元件范圍 top_2。
事件是：隱藏top 逐漸 500ms。
（下面是（1）設置的逐步截圖，（2）的設置類似）
5、設置控件交互（返回頂部）拖入一個矩形命名top_mark，位置放在動態面板top的初始位置（即覆蓋住top）。然后對動態面板top設置”鼠標點擊時”事件。在彈出的窗口中，逐步進行：
- 在“添加動作”里選擇“滾動到元件<錨鏈接>”；
- “配置動作”選擇“top_mark”；
- 僅垂直滾動；
- 動畫“緩慢進入”，時間300毫秒。
6、這樣一個”返回頂部“的效果就做好了。點擊F5預覽，然后向下滑動下鼠標，在屏幕右下角就會顯示返回頂部的按鈕了，當返回頂部后，這個按鈕又會消失不見。
本文由 紀夢旭（微信號：sailalone001） 原創發布于人人都是產品經理?，未經許可，禁止轉載。
不理解最后一步
完全照搬，沒效果。。樓主確認能行嗎？
top2那個空的動態面板不用設置隱藏就可以了，接觸判定對隱藏元件不生效
沒效果啊。。。求源文件1209893853@qq.com
作者的思路方法稍有復雜，其實步驟原理很簡單：
1、將這個返回頂部的按鈕轉換成動態面板，并設置固定瀏覽器窗口（靠右，離頁面底部50像素）
2、在第一屏頁面頂部放置一個熱區
3、針對第一步設置的動態面板，設置一個單擊事件，用例中選擇滾動到錨點（選個熱區），設置隱藏用例，將動態面板隱藏
4、設置頁面滾動事件，增加一個判斷條件，當頁面滾動到某個距離，如900像素時（或者設置接觸線），在顯示動態面板
真個過程其實只需要一個返回頂部的動態面板和一個熱區，設置相應的事件用例即可
為什么要設置top-2接觸top-rp 而不是直接用top呢 請賜教
感謝分享，已經實踐成功~
補充兩點優化：
1、可以反過來設置為接觸時隱藏，未接觸時顯示，這樣不用將top_rp下拉至頁面底部了，只需要短短的一條，并且可以適用各種高度的頁面；
2、可以將4個原件組合，在需要應用的頁面上，直接黏貼過去，并將頁面交互也黏貼過去（正因為頁面交互是在每個頁面單獨設置的，所以沒找到實現模版套用的方式）
能分享一個你成功的原型嗎