导语:今天这篇文章的作者通过Axure和大家分享一下如何在网站的Tab导航条中切换内容页面，回到顶部交互，希望看完能帮到你。

当我们使用Zhihu时，我们会发现向下滚动页面会导致网站的Tab导航栏中的内容切换；同时滚动一定距离，会出现“返回顶部”按钮。单击此按钮返回页面顶部。

一、实现逻辑

向下滑动页面，Tab导航栏由第一种状态切换成第二种状态；向上滑动页面，Tab导航栏由第二种状态切换成第一种状态；页面滑动一定距离，显示回到顶部按钮，点击回到顶部按钮，页面向上滚动回到页面顶部。

二、页面构建组件准备

顶栏两个状态和幻灯片页面的准备，我是通过截图的方式准备的:

返回到顶部按钮和鼠标移动到按钮时显示的浮动窗口，并将组合命名为“返回顶部-始终”:

第三，添加互动事件

将顶列的两个状态放入动态面板中的状态1和状态2，并将动态面板命名为statusBar；

添加鼠标移回顶部按钮显示& # 8221；重回巅峰& # 8221；气泡:

添加上下滑动页面，切换顶部状态栏；

首先，固定顶部状态栏：

第二，向窗口添加交互:

将“回顶合计”组合变成动态面板，将动态面板命名为“回顶合计面板”，固定动态面板的显示位置，隐藏:

添加锚点组件，我们这里选择热区组件，因为热区具有透明特性，所以命名为TopLocation:

为“回到顶部”按钮增加交互，鼠标移入显示“回到顶部”气泡，移除隐藏“回到顶部”气泡；为“回到顶部”按钮添加【单击时】用例，设置动作【滚动到元件】，选择TopLocation，垂直线性滚动500毫秒。
是“回到顶端& # 8221；按钮来增加交互，鼠标移动到显示“回顶”的气泡中，去掉隐藏的“回顶”气泡；为“返回顶部”按钮添加[单击时]用例，设置动作[滚动到组件]，选择TopLocation，垂直和线性滚动500毫秒。

第四，最终效果显示

动词 （verb的缩写）补充知识

在上面的交互应用中，我们会用到Window.scrollY函数，这是一个Window函数；窗口功能包括以下四种类型:

Windows.width：获取浏览器的当前宽度。Windows.height：获取浏览器的当前高度。Windows.scrollX：获取浏览器的水平滚动距离。Windows.scrollY：获取浏览器的垂直滚动距离。