騰訊首頁
當我們瀏覽騰訊新聞網頁滾動到第二屏時，這時網頁的右下角會出現返回頂部按鈕，點擊按鈕頁面迅速回到第一屏位置。那麼這樣的原型效果，如何利用Axure實現呢？下面將為大家詳細講解制作步驟。
準備好元件素材
首先我們需要搭建一個頁面，這裡我們擺放七個矩形框用來表達網頁的內容欄目，多擺放幾個矩形，使得整體網頁的長度保持在兩屏以上。拖入一個向上的箭頭（Axure8.0中已提供）和矩形，選中箭頭和矩形將其轉化為動態面板，命名為返回頂部。
準備元件
右擊動態面板設置為固定到瀏覽器，水平固定位置沿用默認邊距即可，垂直固定設置為向下邊距80，勾選始終保持頂層和固定到瀏覽器窗口，動態面板默認設置為隱藏。
設置固定位置
通過觀察我們不難看出，返回頂部按鈕有三個交互效果
01 頁面向下滾動一段距離，顯示按鈕
02 頁面回滾一段距離，按鈕消失
03 點擊按鈕，頁面返回第一屏位置
設置窗口滾動時用例
case1:：頁面窗口滾動距離超過300時，顯示返回頂部動態面板，對應的函數表達式為[[Window.scrollY]]>300。動作配置中，動畫效果設置為逐漸顯示，動畫時間為500毫秒，並勾選置於頂層。相關配置請參照下方截圖。
頁面向下滾動設置
case2：如果窗口的高度小於等於800時，隱藏返回頂部動態面板，對應的函數表達式為[[Window.height]]≤800。隱藏動作中，動畫效果設置為逐漸隱藏，動畫時間為500毫秒。相關配置請參照下方截圖。
頁面向上滾動設置
按鈕設置鼠標單擊用例
添加動作滾動到元件，這時候我們要為按鈕找到一個錨點位置，假設上圖中的欄目一位我們需要達到的錨點。在配置動作中選中欄目一矩形，選擇僅垂直移動，動畫效果選擇線性動畫，動畫時間設置500毫秒。
為按鈕設置錨點鏈接
至此，所有的用例設置完畢，點擊預覽原型，坐穩了，準備送你上天。
最後為大家奉上源文件鏈接：https://pan.baidu.com/s/1jJTwyz0 密碼：runm
閱讀更多 努力拼搏的80後 的文章
