整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
次教各位小伙伴使用内联框架来实现页面滚动，除此之外还会有一些小案例 ~
先来看看 天猫 首页 顶部栏 的效果 ~
（以上图片已是上传的极限， 各位看官要是看不清，请自行下载天猫，打开首页观看）
所以今天我们就拿天猫首页的顶部栏为例子，来讲解在 Axure 里面是如何制作的 ！！
先看图：
（以上图片分三部分讲，背景元件色值为：#E4E4E4，下面不重复讲）
1.首先新建 Axure 文件，顶部电量条可由大家随意制作（ w：375 ，h：20 ），如果有相关组件库的小伙伴可直接拖入 ；
2.顶部栏区域，拖进一个元件当做背景（ w：375 ，h：44 ），从 阿里巴巴矢量图标库 （ http://www.iconfont.cn ）下载以下 icon 如图摆放即可 ；
3.在顶部栏区域的下面，拖进一个元件当做背景（ w：375 ，h：44 ），再在该元件上面放置一个纯白色矩形（ w：335 ，h：30 ），命名：“ 输入框背景 ”、一个文本框（ w：290 ，h：28 ），命名：“ 输入框 ” 、一个搜索 icon （ w：14 ，h：14 ），命名：“ 搜索 icon ” 。把 输入框背景、输入框、搜索icon 选中右键点击组合，命名：“ 输入框控件 ” ，完成 ；
完成以上的元件准备，然后我们先把他放置在一旁，等待使用…
4.然后把第一个页面命名为：“ 外页 ” ，在新增一个页面命名为：“ 内页 ” ，拖动 “ 内页 ” 为 “ 外页 ” 的子级，如图 ：
5.然后我们双击进入 外页 的页面，从左侧组件库拖进一个内联框架（ w：375 ，h：667 ），为了美观我们在这个内联框架底部再拖进一个矩形（ w：377 ，h：669 ），然后我们点击内联框架，在右侧属性 – 内联框架 – 选择框架目标 – 内页 – 确定。
继续点击内联框架，右键点击 – 转换成动态面板 ，把该面板“ 自动调整为内容尺寸 ”，然后进入该动态面板，把内联框架的宽高都增加 17 px，如图 ：
6.把刚才步骤 1 – 3 的内容，放入到内页里面（ x ：0 ，y ：0 ），内页的内容比较紧靠左上角，这样才不会出现待会移动的时候体验不好，如图 ：
7.全选以上图片所有内容，右键点击 转换为动态面板 ，在右侧属性设置 – 固定在浏览器 – 水平固定：左 、垂直固定：上 。如图：
8.然后我们在该原型的下方任意放置矩形，在每个矩形里添加 1、2、3 文字，增加识别度 ：
完成以上的所有部分，可以先生成预览看一下效果了 ~
以上就做好了所有的元件准备，内容比较多（ 因为有些小伙伴刚接触 Axure ，拆分得比较细，各位老司机将就一下 ~ ），弄完之后我们就可以开始下一步操作了 ~
1.双击进入内页，在页面的空白处设置 窗口滚动时（Case 1） ：
a.设置条件：值 – [[Window.scrollY]] – 大于等于 – 5 ；
b.移动输入框控件 – 移动：绝对 – x 为：60 ，y 为：27 – 动画：线性 – 时间：250 毫秒 ；
c.设置尺寸：“ 输入框 ” w ：170 ，h ：28 – 锚点：左上角 – 动画：线性 – 时间：250 毫秒 、“ 输入框背景 ” w ：215 ，h ：30 – 锚点：左上角 – 动画：线性 – 时间：250 毫秒 ；
d.设置 “ 背景 ” – 隐藏 – 动画：向上滑动 – 时间：500毫秒 ；
2.双击进入内页，在页面的空白处设置 窗口滚动时（Case 2） ：
a.设置条件：值 – [[Window.scrollY]] – 小于 – 5 ；
b.设置 “ 背景 ” – 显示 – 动画：向下滑动 – 时间：500毫秒 ；
c.移动输入框控件 – 移动：绝对 – x 为：20 ，y 为：71 – 动画：线性 – 时间：250 毫秒 ；
d.设置尺寸：“ 输入框 ” w ：290 ，h ：28 – 锚点：左上角 – 动画：线性 – 时间：250 毫秒 、“ 输入框背景 ” w ：335 ，h ：30 – 锚点：左上角 – 动画：线性 – 时间：250 毫秒 ；
以上完成之后就可以得到以下效果了，是不是很简单？
然后我们完成以上步骤之后，我们还可以在该页面的下面放置一个 “ 返回顶部 ” 的 icon ，意为：当我们下滑到一定位置时，显示 “ 返回顶部 ” icon ，点击该 icon 时，返回至顶部并隐藏 “ 返回顶部 ” icon …
下面我们来开始制作 ~
1.从左侧元件库拉出一条横向水平线，长度小于 375 px 即可，命名为：“ 顶部 ” ，然后置于底层；
2.拉入一个作为 “ 返回顶部 ” 的 icon （ w：40，y：40 ），或者随意拉一个矩形代替都可以；
3.点击 icon 右键转换为动态面板，右侧设置固定到浏览器（此处跟以上相同设置即可）；
4.设置 “ 返回顶部 ” icon 交互用户，鼠标单击时 – 滚动到元件<锚链接> – 勾选：顶部 – 仅垂直滚动 – 动画：线性 – 时间：250 毫秒 ；
5.把 “ 返回顶部 ” icon 放置在内页（ x：315，y:586 ）的位置，点击隐藏 ；
6.在内页的空白处设置 窗口滚动时（Case 3） ：
a.设置条件：值 – [[Window.scrollY]] – 大于等于 – 500 ；
b.显示 “ 返回顶部 ” icon – 动画：逐渐 – 时间：250 毫秒；
7.在内页的空白处设置 窗口滚动时（Case 4） ：
a.设置条件：值 – [[Window.scrollY]] – 小于 – 500 ；
b.隐藏 “ 返回顶部 ” icon – 动画：逐渐 – 时间：250 毫秒；
完成以上设置就可以了，下面我们来看一下效果 ~
好的，以上就是本次的所有讲解，谢谢大家！！
需要的可以下载看看。同时有相关问题的可在以下留言区留言，我将第一时间回复 ~
本文由 @李桂东 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
语：今天，本文作者和大家分享一下如何通过Axure实现网站Tab导航栏切换内容页和返回顶部交互，希望看后对你能有所帮助。
我们在使用知乎时，会发现向下滚动页面，网站Tab导航栏会发生内容切换；同时滚动超过一定距离，会出现回到顶部按钮，点击该按钮，即可返回页面顶部。
顶部栏两种状态及下滑页面准备，我是通过截图的方式准备的：
回到顶部按钮、鼠标移入按钮时所显示的浮窗，将该组合命名为“回到顶部-总”：
将顶部栏的两种状态分别放入动态面板中的状态1与状态2中，将动态面板命名为statusBar；
添加鼠标移入回到顶部按钮显示”回到顶部”气泡：
添加向下、向上滑动页面，顶部状态栏切换；
其次，对窗口添加交互：
将“回到顶部-总”组合转为动态面板，将该动态面板命名为“回到顶部-总panel”，固定动态面板显示位置，并隐藏：
添加锚点元件，我们在此选择热区元件，因为热区具有透明的特性，将其命名为TopLocation：
为“回到顶部”按钮增加交互，鼠标移入显示“回到顶部”气泡，移除隐藏“回到顶部”气泡；为“回到顶部”按钮添加【单击时】用例，设置动作【滚动到元件】，选择TopLocation，垂直线性滚动500毫秒。
在上面交互的应用中，我们会用到Window.scrollY函数，该函数为窗口函数；窗口函数一共包括以下四种：
本文由 @小青 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自 Unsplash，基于 CC0 协议
在日常交互场景中，我们经常会使用【返回顶部】或者【锚点定位】功能，来快速到达自己想去的页面，那么如何使用 Axure 实现这一交互效果呢，本文将利用 Axure 中【滚到元件】的交互去实现这两个功能。
这个功能在日常使用中非常常见，其实最简单的方式就三点
1、默认隐藏【返回顶部】；
2、页面向下滑动一定距离后显示【返回顶部】；
3、点击【返回顶部】返回到页面顶部
接下来开始动手做吧:
最上面的矩形作为顶部内容，再画一块矩形拉长页面，最后用一个动态面板画一个回到顶部的按钮。
首先页面是可以持续滚动的，而【返回顶部】的按钮是固定在页面上的，所以需要对按钮所在的【动态面板】配置【固定到浏览器】
接下来给【动态面板】设置【单击】【滚动到原件】，目标为【顶部矩形】
这个时候【返回顶部】的功能就做完了，但是当页面已经处于顶部的时候，通常情况下是不需要显示返回按钮的，而是当页面向下滑动一定距离后才显示，所以可以优化一下
我们点一下画布的空白处，给页面添加【窗口滚动时】的交互，当窗口垂直滑动的距离大于顶部矩形高度的手则【显示】 【动态面板】 ，否则就【隐藏】
交互设置完成之后我们再去默认隐藏【动态面板】就完成了
当网页内容较长时，通过设置锚点，用户可以通过点击链接直接跳转到页面的特定区域。
这种方式不仅提升了页面的可访问性，也使得用户在浏览大量信息时更加快捷。
接下来模拟这样一个场景：四个内容四个标题，一个动态面板
然后给动态面板设置【单击】【滚动到原件】的事件，目标就是对应的标题，一 一对应设置好就完成啦
感谢您的阅读，希望本文能够启发您的设计灵感，期待在设计的道路上与您相遇
– 欢迎点赞、关注、转发、收藏【我码玄黄】，gonghao同名
*请认真填写需求信息，我们会在24小时内与您取得联系。
