在網(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，設(shè)置寬度為700，高度為100，并添加文字“頂部”。同樣的方法設(shè)置一個底部矩形元件。

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

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

設(shè)計效果

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

設(shè)置鼠標單擊事件

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

設(shè)置滾動到元件錨鏈接

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

設(shè)置向下箭頭事件

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

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

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

固定到瀏覽器

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

預(yù)覽設(shè)計效果

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