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

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

一、返回頂部

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

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

返回頂部的設(shè)計主要有3個要點：

1. 默認隱藏；
2. 頁面向下滑動一定距離后顯示；
3. 點擊按鈕返回到頁面頂部。

接下來開始動手做。

先畫個示意界面：

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

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

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

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

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

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

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

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

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

二、錨點

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

接下來用 Axure 來實現(xiàn)類似設(shè)計。

外觀如下：

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

接下來給表格的每個單元格添加滾動到元件，目標就是對應(yīng)的標題：

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

其他場景就請各位自己挖掘了。