快好知 kuaihz

Axure制作网页回到顶部的交互效果

网站页面内容过多,需要下拉滑动,但又想快速回到顶部,右下角会出现回到顶部的按钮或图标,点击该图标,浏览器会快速切换到页面顶部,这个交互效果该如何实现呢?

常见的回到顶部场景,网站页面内容过多,需要下拉滑动,但又想快速回到顶部,右下角会出现回到顶部的按钮或图标,点击该图标,浏览器会快速切换到页面顶部,如何实现呢?

如下图,浏览器上滑动超过顶部导航高度时,有两个交互效果:

自动出现“回到顶部”按钮;

点击“回到顶部”,返回到网页首部区域;

第一步,建立母版

母版名称命名为“回到顶部”,在母版中设置两个按钮和一个热区,分别命名为“咨询”或者其他随意,另一个叫”回到顶部“;热区命名为“顶部”。

设置“回到顶部”元件为隐藏状态,并且设置点击事件,点击“回到顶部”滚动至顶部热区(下图):

将“课程咨询”和“回到顶部”二个元件设置为动态面板,命名为“侧栏导航”,设置该动态面板属性为固定至浏览器某个位置,常见的为右下角,案例中,我设置距离浏览器右侧10像素,浏览器下边缘10像素。

第二步,设置页面滚动条件

在页面窗口滚动时,设置当滚动值大于150PX时,显示“顶部导航”滚动值小于150px时,隐藏“顶部导航”。

第三步,拖动至指定页面

需要回到顶部的地方,如下图,案例中我需要回到顶部导航,所以拖放至顶部主导航右侧。

基本完成,刷新一下,看看效果。

当小于150像素时,不显示“顶部导航”。

文章第一张图为大于150像素时,显示,且固定在屏幕右下角,制作成功!!!

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:交互  交互词条  顶部  顶部词条  回到  回到词条  效果  效果词条  网页  网页词条  
原型

 穿梭器:双向列表带计数选择

前段时间分享过一个支持单选的穿梭器(列表框左右双向选择)案例,很多朋友觉得很赞,同时也想进一步学习并掌握支持单选、多选、全选的穿梭器交互制作。作者将通过这篇案列...(展开)

原型

 Axure 8.0 拖动滑块设置...

1.绘制基本原件(1)在滑动块中一共由三部分组成:滑动的按钮左侧随滑块变化的进度条右侧逐渐减少的进度条。先创建这三个组件:按钮套入动态面板中,命名为“butto...(展开)

原型

 Axure原型:1个原型搞定工作...

团队中,总会有人没有好的整理习惯,或者记性不好,亦或者你也不想为了这些事情耽误自己的时间。如何能有效的减少这类事情的沟通成本呢?作者尝试制作了一个关于需求沟通的...(展开)