導語：今天，本文作者和大家分享一下如何通過Axure實現網站Tab導航欄切換内容頁和返回頂部交互，希望看後對你能有所幫助。
我們在使用知乎時，會發現向下滾動頁面，網站Tab導航欄會發生内容切換；同時滾動超過一定距離，會出現回到頂部按鈕，點擊該按鈕，即可返回頁面頂部。
一、實現邏輯向下滑動頁面，Tab導航欄由第一種狀态切換成第二種狀态；向上滑動頁面，Tab導航欄由第二種狀态切換成第一種狀态；頁面滑動一定距離，顯示回到頂部按鈕，點擊回到頂部按鈕，頁面向上滾動回到頁面頂部。二、頁面構建元件準備 頂部欄兩種狀态及下滑頁面準備，我是通過截圖的方式準備的：
回到頂部按鈕、鼠标移入按鈕時所顯示的浮窗，将該組合命名為“回到頂部-總”：
三、添加交互事件 将頂部欄的兩種狀态分别放入動态面闆中的狀态1與狀态2中，将動态面闆命名為statusBar；
添加鼠标移入回到頂部按鈕顯示”回到頂部”氣泡：
添加向下、向上滑動頁面，頂部狀态欄切換；
其次，對窗口添加交互：
将“回到頂部-總”組合轉為動态面闆，将該動态面闆命名為“回到頂部-總panel”，固定動态面闆顯示位置，并隐藏：
添加錨點元件，我們在此選擇熱區元件，因為熱區具有透明的特性，将其命名為TopLocation：
為“回到頂部”按鈕增加交互，鼠标移入顯示“回到頂部”氣泡，移除隐藏“回到頂部”氣泡；為“回到頂部”按鈕添加【單擊時】用例，設置動作【滾動到元件】，選擇TopLocation，垂直線性滾動500毫秒。
四、最終效果展示 
五、補充知識 在上面交互的應用中，我們會用到Window.scrollY函數，該函數為窗口函數；窗口函數一共包括以下四種：
Windows.width：獲取浏覽器的當前寬度。Windows.height：獲取浏覽器的當前高度。Windows.scrollX：獲取浏覽器的水平滾動距離。Windows.scrollY：獲取浏覽器的垂直滾動距離。 本文由 @小青 原創發布于人人都是産品經理，未經許可，禁止轉載
題圖來自 Unsplash，基于 CC0 協議
,
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
