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

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

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

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

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

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

設(shè)計(jì)效果

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

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

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

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

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

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

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

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

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

固定到瀏覽器

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

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

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