Axure9锚点滚动效果教程：步骤不多

Axure9的锚点滚动效果。锚点滚动，就是根据鼠标点击，页面滚动到事先设定好的位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

效果如图：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

做到这个效果有两步，以及一个容易忽略的注意事项。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

• 为元件设计交互-单击时滚到到元件。
• 设置动态面板-固定到浏览器

Tip：注意画面有足够空间，让最下边的元件也可以实现滚动。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

那么就让我们详细看一下吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

一、准备工作

侧边栏：拖出一个较窄深色的长方形矩形。拖出四个相同大小，同色的小矩形，命名为“paragraph 1”等，覆盖在大矩形上。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

主页面：拖出一个较宽的浅色长方形矩形，并在上面设计好每段落的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

Tip：特别注意，主页面最后一段下方要留够空间，不然paragraph 4很难实现滚动，变成下面这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

准备工作完成以后，就进入正式的设计阶段了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

二、为元件设计交互-单击时滚到到元件

选择左侧导航栏中的任一元件，点击Axure9右侧交互按钮，选择在单击时滚动到元件的交互。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

设置动作里的目标为主页里对应名称的元件，即左侧paragraph 1对应主页paragraph 1。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

方向选择垂直，动画选择线性，这样会呈现一个流畅的画面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

其他几个左侧导航栏按钮类似。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

三、设置动态面板-固定到浏览器

经过上面的步骤以后，我们点击侧边栏中的元件，可以实现画面的滚动。但是由于侧边栏没有固定，给我们添加了操作上面的难度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

利用动态面板-固定到浏览器这个功能，可以完美解决这个问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

我们首先选中侧边栏中四个元件，然后右击选择转换为动态面板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

点击该动态面板，在右侧的样式中选择固定到浏览器，在水平固定中选择左侧，垂直固定中选择顶部。勾选始终保持顶层。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

完成这些步骤以后，这个效果就完成了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html

来源：艾筱说文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/24074.html