新知榜官方账号
2023-10-07 23:50:19
今天我们来分享一个浏览网页时经常会遇到的一个操作,“回到顶部”。有了这个操作,浏览网页时就非常方便了,特别是商城类的网站,这个操作是必不可少的了,一起来看看~
这个原型一共用到两个页面:“首页”和“内容页面”。
组件一个矩形框,尺寸1024×120,作为网页头部,可放置logo和标题(尺寸大小不要求,自己喜欢就好);一个内联框架,尺寸1024×520,作为网页主体(宽度与网页头部一致,高度不要求)。
组件可以放置一些灰色方框,代表网页内容,要有错开放置,显示的时候有回到顶部的效果就可以了(注意:放置的内容总高度要大于内联框架的高度);一条水平线放置在y轴为0的位置,命名为“顶部”;一个50×50的动态面板放置在右下角,命名为“回到顶部”,动态面板state面板状态中,放置一个50×50的箭头,设置图标颜色为浅灰色(icons图标中可找到)。
为内联框架添加链接属性,设置内联框架链接到“页面内容”双击内联框架勾选链接页面,并确定。
为“回到顶部”设置固定到浏览器右键“回到顶部”设置固定到浏览器,水平固定位置右边距15,垂直固定位置下边距15,始终保持顶部。
为“回到顶部”添加鼠标点击时用例设置为垂直滚动到“顶部”,线性,500毫秒。
好啦,拥有火箭速度的回到顶部已经完成了,快去预览看看效果吧!!可以先瞧瞧完成的效果https://k7ig8o.axshare.com
本文由@方子原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Pixabay,基于CC0协议
微信扫码咨询
相关工具
相关文章
推荐
阿里Accio中文版上线!一键搞定复杂采购
2025-08-19 09:13
视频“用嘴编辑”的时代来了,但钱包顶得住吗?
2025-08-15 17:59
智谱新模型GLM-4.5V全面开源,玩家们有福啦!
2025-08-12 17:56
扎心文案+AI插画=爆款!揭秘8万赞视频的制作全流程
2025-08-12 10:08
GPT-5没你想的那么好,附实测体验~
2025-08-11 11:07
一站式搞定AI绘图+视频,AI短片效率飙升的秘密在这儿!
2025-08-08 09:26
打工人新神器!10款国产AI,让你告别996!
2025-08-08 09:24
豆包视觉推理深度体验,AI也能“边看边想”了!
2025-08-08 09:19
300美元的AI男友来了!马斯克的情感生意从女友做到男友
2025-08-01 17:56
Agent智能体:2025年企业新员工,月薪仅需一度电?
2025-07-30 17:49