用Axure制作回到顶部效果

用Axure制作回到顶部效果

浏览的网页内容较多需要“瀑布式”浏览时，一个“回到顶部”的操作能带给用户良好的体验。该效果主要涉及到两个方面：1是当页面向下滑到一定程度的时候，显示“回到顶部”操作图标。2是点击“回到顶部”图标，页面可以滚动显示到顶部。具体步骤如下：

1、页面放两个热区一个图标

一个热区大小50*50命名为“顶锚”，位置（x:0，y:0）。另一个热区同样大小命名为“底锚”，位置（x:0，y:1000），这里的y值需要比浏览器高的值大，后面才会有页面下滚的动作，如果页面已有大量内容且高度大于浏览器时可省去这里的“底锚”热区。

图标命名为“回到顶部”，大小位置随意，如下：

image.png

2、将图标转为动态面板

如下图动作1转为动态面板后，再点2，使图标固定到浏览器，位置如下：

image.png

image.png

3、给“回到顶部”设置点击事件

设置点击后页面滚回到页面顶部事件，如下

image.png

4、将“回到顶部”隐藏

如下图示

image.png

5、给整个页面设置滚动事件

条件1： if "[[Window.scrollY]]" is greater than "20"，那么show“回到顶部”

image.png

条件2：if "[[Window.scrollY]]" is less than or equals "20"，那么hide“回到顶部”

image.png

6、保存，预览即可

向下滚动前：

image.png

向下滚动后：

image.png