整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在日常交互场景中，我们经常会使用【返回顶部】或者【锚点定位】功能，来快速到达自己想去的页面，那么如何使用 Axure 实现这一交互效果呢，本文将利用 Axure 中【滚到元件】的交互去实现这两个功能。
这个功能在日常使用中非常常见，其实最简单的方式就三点
1、默认隐藏【返回顶部】；
2、页面向下滑动一定距离后显示【返回顶部】；
3、点击【返回顶部】返回到页面顶部
接下来开始动手做吧:
最上面的矩形作为顶部内容，再画一块矩形拉长页面，最后用一个动态面板画一个回到顶部的按钮。
首先页面是可以持续滚动的，而【返回顶部】的按钮是固定在页面上的，所以需要对按钮所在的【动态面板】配置【固定到浏览器】
接下来给【动态面板】设置【单击】【滚动到原件】，目标为【顶部矩形】
这个时候【返回顶部】的功能就做完了，但是当页面已经处于顶部的时候，通常情况下是不需要显示返回按钮的，而是当页面向下滑动一定距离后才显示，所以可以优化一下
我们点一下画布的空白处，给页面添加【窗口滚动时】的交互，当窗口垂直滑动的距离大于顶部矩形高度的手则【显示】 【动态面板】 ，否则就【隐藏】
交互设置完成之后我们再去默认隐藏【动态面板】就完成了
当网页内容较长时，通过设置锚点，用户可以通过点击链接直接跳转到页面的特定区域。
这种方式不仅提升了页面的可访问性，也使得用户在浏览大量信息时更加快捷。
接下来模拟这样一个场景：四个内容四个标题，一个动态面板
然后给动态面板设置【单击】【滚动到原件】的事件，目标就是对应的标题，一 一对应设置好就完成啦
感谢您的阅读，希望本文能够启发您的设计灵感，期待在设计的道路上与您相遇
– 欢迎点赞、关注、转发、收藏【我码玄黄】，gonghao同名
我们打开任何手机app滑动的手势最多的永远是两种，上下滑动与左右滑动，这个原型是如何在Axure里面怎么体现出来的呢？接下来我就来告诉大家。
要完成这看似简单的操作，其实还是要有一些技巧的。Axure软件动态面板属性可以滑动，但是滑动的结果只能是水平和垂直两种分开的情况。
但是也不是没有办法实现同页面上下、左右滑动这个效果。
主要突破点在对条件的判断。
我们回想一下使用手机App软件的情形，按住屏幕不松手指向下滑动屏幕，手机里面页面只能向下（上）滑动，无论你手再怎么左右滑动，其结果还是向下（上）滑动；向左右滑动屏幕也是一样的道理。
所以，手给屏幕一个动作，页面判断手滑动屏幕的方向，执行手最初始手滑动屏幕方向移动，而且不松手，屏幕移动只能维持竖直或者水平两种效果，并不能从竖直移动转换到水平移动，除非松手后页面再次执行判断。即手最开始的动作决定了页面滑动的方向。
抓住这一点，通过已学Axure软件知识点，我想出如下实现该功能方案。
我通过多次尝试终于测试出一种结果较为理想的方法：
拖动动态面板A开始，通过动态面板C两个状态快速循环，在其状态改变时记录全局变量x、y，进而判断拖动动态面板A时x、y大小从而知道其页面（动态面板B）滑动方向。
流程图如下：
做一个手机外壳，内嵌宽高325X575的内联框架，连接框架到内容页面：
设置全局变量x、y；
点击菜单栏中-项目-全局变量，新增两个全局变量x和y，设值为空或0；
向新的页面添加一个带页码的矩形标识框，复制成三份，分别代表第一页、第二页、第三页，名称分别为1、2、3。
将这三个页面圈起来—右键—转换为动态面板，设置该动态面板名称为B，再点击动态面板B—右键—转换为动态面板，设置最外层动态面板名称为A。
再往动态面板A外面拖入一个新的动态面板C,把动态面板状态添加到两个。
在动态面板A上设置如下用例：
拖动开始时：设置动态面板C状态为Next，向后循环，间隔2ms（时间要短）；
拖动时：判断全局变量x，y大小；
x>y时水平移动动态面板B，x<y时垂直移动动态面板B；
拖动结束时：设置动态面板C停止循环。
在动态面板C上设置用例
状态改变时：设置全局变量值。
x=[[math.abs(math.ceil(TotalDragX))]]，y=[[math.abs(math.ceil(TotalDragY))]]
点击菜单栏发布-预览即可看到同页面实现了左右、上下两种拖动效果。
emmmmmmm觉得看着很不舒服我们可以进一步完善原型：
增加：
在原来的原型基础上：
水平拖动而言，知道动态面板B元件的宽高为975X1000，单个矩形页面宽高为325X1000。所以水平拖动限制边界范围为[-650，0]即可满足水平拖动时不会把页面拖浏览边框。
同样的垂直拖动，限制边界范围为[-500，0]即可。
技术等级】初级
【承接文章】《CSS段落行高，竟然能够实现垂直居中功能，神奇的CSS技术》
本文重点讲解CSS技术中文本样式的 vertical-align 属性的详细用法。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
vertical-align属性的用法较为复杂，该属性的取值较多，不了解这个属性用法的学习者，一定要坚持把这篇文章读完。
一、设置垂直方向的对齐方式：
CSS技术利用 vertical-align 属性来设置内联元素的垂直对齐方式
该属性的功能是：设置内联元素或内联块元素相对于所在行其他元素的垂直对齐方式。这里在对齐时，都是考虑基线的对齐，即内联元素的基线相对于所在行其他元素的基线的垂直对齐方式。
这里需要注意的一定要是“内联元素”或“内联块元素”。
【有关“内联元素”的知识，可以参考小海老师前面写的《CSS段落对齐方式，系统认识块级元素与内联元素，CSS前端进阶篇》一文】
该属性的取值可以有以下几种：
带有单位的数值，可以取负值，在基线对齐的基础上，内联元素向下移动一定的距离（正值）或者向上移动一定的距离（负值）。
%，可以取负值，在基线对齐的基础上，内联元素向下移动line-height属性的百分比的距离（正百分比）或者向上移动line-height属性的百分比的距离。
baseline，【默认值】基线对齐，内联元素的基线与所在行的其他元素的基线对齐。
sub，上标。
super，下标。
top，顶部对齐，内联元素的顶部与所在行的其他元素中最高的元素的顶部对齐。
text-top，文本顶部对齐，内联元素的顶部与所在行的文字顶部对齐。
middle，中部对齐，内联元素的中部与所在行其他元素的中部对齐。
bottom，底部对齐，内联元素的底部与所在行的其他元素中最低的元素的底部对齐。
text-bottom，文本底部对齐，内联元素的底部与所在行的文字底部对齐。
二、基线垂直对齐：
要想深入了解vertical-align属性各项取值的含义，首先，让我们先看一看什么是基线对齐。
例1：在段落标记<p></p>内部，放置一个图片和一行文字。HTML代码如下。
<p>
<img src="images/a.jpg" /> 小海前端
</p>
得到的效果如下图所示，仔细观察下图：图片底部和文字底部是对齐的吗？
例1的最终效果
仔细观察，其实它们底部并没有完全对齐。如果将文字的字号放大，可以看得更加明显。
将例1中的文字放大后的效果
上图中，由于文字字号的变大，在图片中只呈现了一个“小”字，但是我们完全可以看出，图片的底部并没有和文字的底部对齐。而对齐文字的这个位置实际上是文字的“基线”。
【有关“基线”的知识，可以参考小海老师前面写的《CSS段落行高，竟然能够实现垂直居中功能，神奇的CSS技术》一文】
原来，图片本身属于内联元素，而 内联元素的vertical-align属性的默认取值为baseline，即基线对齐，也就是图片的基线（底部）默认和文字的基线对齐了。
三、取值为“带有单位的数值”：
如果vertical-align属性的取值为带有单位的数值，则也是在基线对齐的基础上开始上下移动一定的距离。
如果图片的vertical-align属性取值为0px，则依然为基线对齐的位置。
如果图片的vertical-align属性取值为5px，则在基线对齐位置的基础上向下移动5px的距离。
如果图片的vertical-align属性取值为-5px，则在基线对齐位置的基础上向上移动5px的距离。
四、取值为“百分比 ”：
如果vertical-align属性的取值为百分比，则也是在基线对齐的基础上开始上下移动一定的距离。
那么，问题来了。
百分比意味着移动多少像素的距离呢？
百分比又是以什么距离为基准的呢，即谁的百分比呢？
我们前端开发工程师一定要记住：vertical-align属性的百分比取值不是父元素高度的百分比，而是 line-height 属性取值的百分比。
即：vertical-align属性的百分比取值是以line-height属性的取值为基准的，及移动距离为vertical-align属性的绝对值乘以line-height属性取值的距离数。
假设：容器的line-height属性取值为20px，则：
如果图片的vertical-align属性取值为0%，则依然为基线对齐的位置。
如果图片的vertical-align属性取值为50%，则在基线对齐位置的基础上向下移动(20px*50%)的距离，即向下移动10px。
如果图片的vertical-align属性取值为-50%，则在基线对齐位置的基础上向上移动(20px*50%)的距离，即向上移动10px。
五、取值为top和text-top：
例2：我们在例1的基础上在段落<p></p>中再添加一个图片，并设置图片的高度大于文本。
仔细阅读下列HTML代码：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
从代码中可以看出，文字“小海前端”左侧的图片设置了vertical-align属性，并取值为top。根据文字“小海前端”左右的两张图片的width属性可知，右侧图片的高度肯定比较高。
效果如下图所示。
例2的最终效果
原因是：vertical-align属性取值为top是指让设置了该属性的元素顶部和同行周围元素中最高元素的顶部对齐。从图中可知，显然最高的元素是右侧的图片，因此就呈现为上图中的外观了。
而右面的图片没有设置vertical-align属性，因此依然为“基线对齐”，即右侧图片的底部对齐文字的基线。
例3：在例2的基础上，我们将右侧图片的高度缩小至比文字还小的程度，那可想而知，左侧图片就应该与文字顶部对齐了。
仔细阅读下列HTML代码：
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:top" />
小海前端
<img src="images/a.jpg" width="100" />
</p>
从代码中可以看出，右侧图片的宽度由500改为了100，同时高度也会随之等比缩小。
最终效果如下图所示：
例3的最终效果
例4：在例2的基础上，我们调整左侧图片vertical-align属性的取值为text-top，则HTML代码如下。
<p style="font-size:100px">
<img src="images/a.jpg" width="300" style="vertical-align:text-top" />
小海前端
<img src="images/a.jpg" width="500" />
</p>
则最终的显示效果如下图所示。
例4的最终效果
原因是：text-top属性是要求内联元素与同行内文本的顶部对齐。因此，就出现了上图中的效果。
而右面的图片没有设置vertical-align属性，因此依然为“基线对齐”，即右侧图片的底部对齐文字的基线。
vertical-align属性还具备bottom和text-bottom取值，和这两个顶部对齐（top和text-top）的含义是类似的，希望同学们自己在电脑上尝试一下。
下一篇文章中，小海老师会为大家讲解一个vertical-align属性和line-height属性的应用，用于去掉图片在容器中放置时，底部产生的小距离。这是前端开发中非常经典的bug解决方案，对于希望深入了解前端开发的学习者真的是非常重要。
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
在头条上所写的这些文章都是从前端开发的基础开始一步一步讲起的。小海老师非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我精心整理和系统归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
*请认真填写需求信息，我们会在24小时内与您取得联系。
