E5.09.3scroll-top is not back设计
返回顶部不等于返回上一页
别名: 回到顶部不是返回 · scroll versus history
概念解释
回到顶部改的是这一页里面的视口位置,返回改的是页面之间的历史栈。滚到顶部不是返回(scroll-top is not back)要划开这两次离开:一个还在本页,只是去了页首;一个离开本页,去了上一帧。图标都是向上的箭头时,两条路会被点混,系统把「我想离开」执行成「我还在这页的开头」。
机制
「向上」在空间上既像滚向页首,也像回到来路。尤其在已经滚得很深、顶栏被藏起、系统返回手势还不稳的时候,人会抓最近的向上控件。若那枚控件只改 scrollTop,历史栈不动,用户看见熟悉的页首,以为自己回来了,接着会再点一次——仍在本页。两次失败后才会去找真正的返回。反之,若产品把向上箭头做成返回,深页用户本想看标题或筛选,却被弹出这一页,阅读位置和未提交的筛选一起丢掉。
混淆在移动端更重:边缘滑动、顶栏返回、悬浮向上箭头可能同时存在,却没有分清「页内原点」和「栈上上一帧」。桌面浏览器同时有系统返回和页内按钮,文案或位置一旦相似,误触会导航到站外。
边界
单页应用把「返回」实现成滚到上一个锚点时,语义本就在页内,这时回到顶部与返回可能是不同程度的页内跳转,必须用文案分开(「到页首」对「上一项」)。嵌入 WebView 没有浏览器返回时,页内向上更容易被当成唯一出口,更不能只用箭头。阅读器「上一章」也是向上隐喻,和到页首冲突。短页上若同时露出返回和到页首,几乎必然点错——短页本不该有到页首。
怎么落地
- 到页首的控件写清「顶部」或「到页首」,不要只用无说明的向上箭头;返回保持系统或顶栏的返回语义与位置。
- 不要把到页首放在左上返回槽,也不要在顶栏返回和悬浮箭头之间共用同一套图标。
- 激活到页首不得调用历史后退;激活返回不得只改滚动位置。
- 验证:在长页中部问「离开这一页」和「去看这一页开头」,两次应点到不同控件、落到不同结果。把图标和文案打码再测一次,若两条路仍被当成同一件事,视觉隐喻就混了。