在網(wǎng)站中經(jīng)常見到有一塊區(qū)域處于懸浮狀態(tài)，單擊它就會滾動到指定位置。接下來介紹如何在Axure rp中實現(xiàn)此效果。 創(chuàng)建頂部和底部矩形元件 首先，在Axure rp中用鼠標拖一個矩形元件到畫布中，命

在網(wǎng)站中經(jīng)常見到有一塊區(qū)域處于懸浮狀態(tài)，單擊它就會滾動到指定位置。接下來介紹如何在Axure rp中實現(xiàn)此效果。

創(chuàng)建頂部和底部矩形元件

首先，在Axure rp中用鼠標拖一個矩形元件到畫布中，命名為top，設置寬度為700，高度為100，并添加文字“頂部”。同樣的方法設置一個底部矩形元件。

創(chuàng)建向上和向下箭頭

接下來，拖動兩個矩形元件，并調(diào)整其中一個元件的方向，使其呈現(xiàn)向下的三角形形狀。

設計效果

完成上述步驟后，你將看到設計后的效果。

設置鼠標單擊事件

選中向上箭頭上方的熱區(qū)元件，給它添加鼠標單擊時觸發(fā)的事件。

設置滾動到元件錨鏈接

在用例編輯窗口中，選擇“滾動到元件錨鏈接”，并在右側的元件列表中選擇top矩形元件，并勾選“僅垂直滾動”。完成后點擊確定。

設置向下箭頭事件

同樣的步驟，拖動一個熱區(qū)元件放在向下箭頭的上方，并進行事件設置。

轉換為動態(tài)面板

同時選中向上箭頭和向下箭頭，右鍵點擊選擇“轉換為動態(tài)面板”，并對動態(tài)面板進行屬性設置。

固定到瀏覽器

選中動態(tài)面板，右鍵點擊選擇“固定到瀏覽器”，并進行相應的屬性設置。

預覽設計效果

按下F5鍵進行設計效果的預覽。你會發(fā)現(xiàn)通過點擊向上箭頭可以滾動到頁首，而點擊向下箭頭則可以滾動到頁尾。