在一些新聞網(wǎng)頁上，到第二屏?xí)r，會有返回頂部的按鈕，那么這樣的原型效果，如何利用Axure實(shí)現(xiàn)呢？

當(dāng)我們?yōu)g覽騰訊新聞網(wǎng)頁滾動到第二屏?xí)r，這時網(wǎng)頁的右下角會出現(xiàn)返回頂部按鈕，點(diǎn)擊按鈕頁面迅速回到第一屏位置。

那么這樣的原型效果，如何利用Axure實(shí)現(xiàn)呢？下面將為大家詳細(xì)講解制作步驟。

一、準(zhǔn)備好元件素材

首先我們需要搭建一個頁面，這里我們擺放七個矩形框用來表達(dá)網(wǎng)頁的內(nèi)容欄目，多擺放幾個矩形，使得整體網(wǎng)頁的長度保持在兩屏以上。拖入一個向上的箭頭（Axure8.0中已提供）和矩形，選中箭頭和矩形將其轉(zhuǎn)化為動態(tài)面板，命名為返回頂部。

右擊動態(tài)面板設(shè)置為固定到瀏覽器，水平固定位置沿用默認(rèn)邊距即可，垂直固定設(shè)置為向下邊距80，勾選始終保持頂層和固定到瀏覽器窗口，動態(tài)面板默認(rèn)設(shè)置為隱藏。

設(shè)置固定位置

通過觀察我們不難看出，返回頂部按鈕有三個交互效果：

1. 頁面向下滾動一段距離，顯示按鈕；
2. 頁面回滾一段距離，按鈕消失；
3. 點(diǎn)擊按鈕，頁面返回第一屏位置。

二、設(shè)置窗口滾動時用例

case1：頁面窗口滾動距離超過300時，顯示返回頂部動態(tài)面板，對應(yīng)的函數(shù)表達(dá)式為[[Window.scrollY]]>300。動作配置中，動畫效果設(shè)置為逐漸顯示，動畫時間為500毫秒，并勾選置于頂層。

相關(guān)配置請參照下方截圖：

頁面向下滾動設(shè)置

case2：如果窗口的高度小于等于800時，隱藏返回頂部動態(tài)面板，對應(yīng)的函數(shù)表達(dá)式為[[Window.height]]≤800。隱藏動作中，動畫效果設(shè)置為逐漸隱藏，動畫時間為500毫秒。

相關(guān)配置請參照下方截圖：

頁面向上滾動設(shè)置

三、按鈕設(shè)置鼠標(biāo)單擊用例

添加動作滾動到元件<錨鏈接>，這時候我們要為按鈕找到一個錨點(diǎn)位置，假設(shè)上圖中的欄目一位我們需要達(dá)到的錨點(diǎn)。在配置動作中選中欄目一矩形，選擇僅垂直移動，動畫效果選擇線性動畫，動畫時間設(shè)置500毫秒。

為按鈕設(shè)置錨點(diǎn)鏈接

至此，所有的用例設(shè)置完畢，點(diǎn)擊預(yù)覽原型，坐穩(wěn)了，準(zhǔn)備送你上天。

最后為大家奉上源文件鏈接：https://pan.baidu.com/s/1jJTwyz0 密碼：runm

本文由 @kevin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CCO協(xié)議