導語：今天，本文作者和大家分享一下如何通過Axure實現網站Tab導航欄切換內容頁和返回頂部交互，希望看后對你能有所幫助。

我們在使用知乎時，會發(fā)現向下滾動頁面，網站Tab導航欄會發(fā)生內容切換；同時滾動超過一定距離，會出現回到頂部按鈕，點擊該按鈕，即可返回頁面頂部。

一、實現邏輯

1. 向下滑動頁面，Tab導航欄由第一種狀態(tài)切換成第二種狀態(tài)；向上滑動頁面，Tab導航欄由第二種狀態(tài)切換成第一種狀態(tài)；
2. 頁面滑動一定距離，顯示回到頂部按鈕，點擊回到頂部按鈕，頁面向上滾動回到頁面頂部。

二、頁面構建元件準備

頂部欄兩種狀態(tài)及下滑頁面準備，我是通過截圖的方式準備的：

回到頂部按鈕、鼠標移入按鈕時所顯示的浮窗，將該組合命名為“回到頂部-總”：

三、添加交互事件

將頂部欄的兩種狀態(tài)分別放入動態(tài)面板中的狀態(tài)1與狀態(tài)2中，將動態(tài)面板命名為statusBar；

添加鼠標移入回到頂部按鈕顯示”回到頂部”氣泡：

添加向下、向上滑動頁面，頂部狀態(tài)欄切換；

• 首先，固定頂部狀態(tài)欄：

其次，對窗口添加交互：

將“回到頂部-總”組合轉為動態(tài)面板，將該動態(tài)面板命名為“回到頂部-總panel”，固定動態(tài)面板顯示位置，并隱藏：

添加錨點元件，我們在此選擇熱區(qū)元件，因為熱區(qū)具有透明的特性，將其命名為TopLocation：

為“回到頂部”按鈕增加交互，鼠標移入顯示“回到頂部”氣泡，移除隱藏“回到頂部”氣泡；為“回到頂部”按鈕添加【單擊時】用例，設置動作【滾動到元件】，選擇TopLocation，垂直線性滾動500毫秒。

四、最終效果展示

五、補充知識

在上面交互的應用中，我們會用到Window.scrollY函數，該函數為窗口函數；窗口函數一共包括以下四種：

1. Windows.width：獲取瀏覽器的當前寬度。
2. Windows.height：獲取瀏覽器的當前高度。
3. Windows.scrollX：獲取瀏覽器的水平滾動距離。
4. Windows.scrollY：獲取瀏覽器的垂直滾動距離。

本文由 @小青 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載

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