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

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

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

一、準備好元件素材

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

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

設置固定位置

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

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

二、設置窗口滾動時用例

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

相關配置請參照下方截圖：

頁面向下滾動設置

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

相關配置請參照下方截圖：

頁面向上滾動設置

三、按鈕設置鼠標單擊用例

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

為按鈕設置錨點鏈接

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

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

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

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