用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

推荐阅读更多精彩内容