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

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

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

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

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

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

設(shè)置固定位置

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

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

二、設(shè)置窗口滾動(dòng)時(shí)用例

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

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

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

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

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

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

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

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