在日常交互場(chǎng)景中，我們經(jīng)常會(huì)使用“返回頂部”或者錨點(diǎn)定位功能，來(lái)快速到達(dá)自己想去的頁(yè)面。那么如果想利用Axure來(lái)實(shí)現(xiàn)這一交互設(shè)計(jì)的話，我們又可以如何進(jìn)行呢？本文作者便進(jìn)行了解讀，一起來(lái)看。

Axure 有一個(gè)【滾動(dòng)到元件】的交互，這個(gè)交互在日常設(shè)計(jì)中用得最多的主要有兩種場(chǎng)景，分別是【返回頂部】和【錨點(diǎn)】，今天分享這兩種場(chǎng)景的設(shè)計(jì)。

一、返回頂部

這個(gè)功能在網(wǎng)頁(yè)設(shè)計(jì)中非常常見，但是我在網(wǎng)上搜了一下，卻發(fā)現(xiàn)很少有關(guān)于這塊的 Axure 教程，我猜想大佬們可能是覺得這個(gè)實(shí)在太簡(jiǎn)單，沒有必要出教程。而剩下不多的教程中呢，基本上都非常復(fù)雜，很費(fèi)勁才實(shí)現(xiàn)這個(gè)設(shè)計(jì)，看得人想罵娘，今天，我將分享可能是全網(wǎng)最簡(jiǎn)單的，用 Axure 實(shí)現(xiàn)返回頂部的教程。

先找個(gè)實(shí)際網(wǎng)站看一下，以下是人人都是產(chǎn)品經(jīng)理首頁(yè)的演示效果：

返回頂部的設(shè)計(jì)主要有3個(gè)要點(diǎn)：

1. 默認(rèn)隱藏；
2. 頁(yè)面向下滑動(dòng)一定距離后顯示；
3. 點(diǎn)擊按鈕返回到頁(yè)面頂部。

接下來(lái)開始動(dòng)手做。

先畫個(gè)示意界面：

最上面的【矩形】假裝是頂部?jī)?nèi)容，下方的【占位符】表示頁(yè)面其他內(nèi)容，右側(cè)是一個(gè)【動(dòng)態(tài)面板】，里面放了一個(gè)【圓形】，并填充了文字“↑”。

首先頁(yè)面是可以持續(xù)滾動(dòng)的，而【返回頂部】的按鈕是固定在頁(yè)面上的，所以需要對(duì)按鈕所在的【動(dòng)態(tài)面板】配置【固定到瀏覽器】：

關(guān)于【動(dòng)態(tài)面板】固定到瀏覽器我在《【Axure 教程】動(dòng)態(tài)面板的救贖》有相關(guān)的分享，各位有興趣可以看看。

接下來(lái)給【動(dòng)態(tài)面板】添加【滾動(dòng)到元件】交互，目標(biāo)設(shè)置為【頂部?jī)?nèi)容】的矩形，并選擇【垂直】，動(dòng)畫一般設(shè)置【線性】，速度自己可以根據(jù)觀感調(diào)節(jié)即可：

設(shè)置完看看效果：

這個(gè)時(shí)候【返回頂部】的功能就做完了，但是當(dāng)頁(yè)面已經(jīng)處于頂部的時(shí)候，我們是不需要顯示返回按鈕的，而是當(dāng)頁(yè)面向下滑動(dòng)一定距離后才顯示，所以我們需要優(yōu)化一下。

首先我們點(diǎn)一下工作區(qū)的空白處，不選擇任何元件，給頁(yè)面添加【窗口滾動(dòng)時(shí)】的交互：

這里先判斷窗口垂直滑動(dòng)的距離（Window.scrollY）是否超過(guò)【頂部?jī)?nèi)容】的高度，如果是，表示頂部?jī)?nèi)容板塊已經(jīng)完全滑出瀏覽器頁(yè)面，這個(gè)時(shí)候就可以顯示【返回頂部】按鈕，如果還沒有，則無(wú)需顯示，最后再選擇【返回頂部】按鈕，設(shè)置為隱藏，看看效果：

返回頂部的功能就設(shè)計(jì)完了，如果各位看完覺得這還不簡(jiǎn)單，也請(qǐng)不要罵娘，如果一定要罵的話，就罵我好了。

二、錨點(diǎn)

錨點(diǎn)一般是用于頁(yè)面較長(zhǎng)時(shí)，通過(guò)分類導(dǎo)航來(lái)快速定位頁(yè)面的位置，以人人都是產(chǎn)品經(jīng)理文章頁(yè)為例：

接下來(lái)用 Axure 來(lái)實(shí)現(xiàn)類似設(shè)計(jì)。

外觀如下：

放幾個(gè)標(biāo)題，再放幾段文本段落，右邊放一個(gè)表格做錨點(diǎn)，同樣設(shè)為【動(dòng)態(tài)面板】，并固定在頁(yè)面右下角。

接下來(lái)給表格的每個(gè)單元格添加滾動(dòng)到元件，目標(biāo)就是對(duì)應(yīng)的標(biāo)題：

設(shè)置完之后看看效果：

其他場(chǎng)景就請(qǐng)各位自己挖掘了。