以人人都是產(chǎn)品經(jīng)理的首頁為例，進(jìn)行“返回頂部”原型制作介紹：

1、在工作區(qū)拖入一個(gè)動(dòng)態(tài)面板命名為top，根據(jù)通常返回頂部的按鈕在屏幕右下角的慣例設(shè)置top的X坐標(biāo)和Y坐標(biāo)，并在狀態(tài)1（stage1）里插入一張返回頂部的圖片，然后將動(dòng)態(tài)面板top設(shè)置“固定到瀏覽器”，最后設(shè)置為”隱藏”備用。

2、再拖入一個(gè)動(dòng)態(tài)面板命名為top_2，Y坐標(biāo)與動(dòng)態(tài)面板top一致，X坐標(biāo)任意，但是不要與top重疊（我是直接將top_2放在了top的平行左邊的位置），且top_2中不放入任何元件，然后將動(dòng)態(tài)面板top_2設(shè)置“固定到瀏覽器”后備用。

3、拖入一個(gè)熱區(qū)命名top_rq，X坐標(biāo)與動(dòng)態(tài)面板top_2的X坐標(biāo)一致，Y坐標(biāo)等于動(dòng)態(tài)面板top_2的Y坐標(biāo)加上動(dòng)態(tài)面板top_2的高度(熱區(qū)top_rq的Y坐標(biāo)的設(shè)置不固定，看你的動(dòng)態(tài)面板top想在頁面滑動(dòng)到什么位置開始顯示自定義設(shè)置)，寬度與動(dòng)態(tài)面板top_2的寬度一致，高度直接拖到頁面最底部。

4、設(shè)置頁面交互（向下滑動(dòng)顯示）

添加“頁面滾動(dòng)時(shí)”事件，并添加兩個(gè)條件和相應(yīng)的事件如下：

（1）添加條件：元件范圍 top_rp 接觸 元件范圍 top_2。

事件是：顯示top 逐漸 500ms。

（2）添加條件：元件范圍 top_rp 未接觸 元件范圍 top_2。

事件是：隱藏top 逐漸 500ms。

（下面是（1）設(shè)置的逐步截圖，（2）的設(shè)置類似）

5、設(shè)置控件交互（返回頂部）拖入一個(gè)矩形命名top_mark，位置放在動(dòng)態(tài)面板top的初始位置（即覆蓋住top）。然后對動(dòng)態(tài)面板top設(shè)置”鼠標(biāo)點(diǎn)擊時(shí)”事件。在彈出的窗口中，逐步進(jìn)行：

1. 在“添加動(dòng)作”里選擇“滾動(dòng)到元件<錨鏈接>”；
2. “配置動(dòng)作”選擇“top_mark”；
3. 僅垂直滾動(dòng)；
4. 動(dòng)畫“緩慢進(jìn)入”，時(shí)間300毫秒。

6、這樣一個(gè)”返回頂部“的效果就做好了。點(diǎn)擊F5預(yù)覽，然后向下滑動(dòng)下鼠標(biāo)，在屏幕右下角就會顯示返回頂部的按鈕了，當(dāng)返回頂部后，這個(gè)按鈕又會消失不見。

本文由 紀(jì)夢旭（微信號：sailalone001） 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。