E5.09.3scroll-top is not back设计

返回顶部不等于返回上一页

别名: 回到顶部不是返回 · scroll versus history

概念解释

回到顶部改的是这一页里面的视口位置,返回改的是页面之间的历史栈。滚到顶部不是返回(scroll-top is not back)要划开这两次离开:一个还在本页,只是去了页首;一个离开本页,去了上一帧。图标都是向上的箭头时,两条路会被点混,系统把「我想离开」执行成「我还在这页的开头」。

机制

「向上」在空间上既像滚向页首,也像回到来路。尤其在已经滚得很深、顶栏被藏起、系统返回手势还不稳的时候,人会抓最近的向上控件。若那枚控件只改 scrollTop,历史栈不动,用户看见熟悉的页首,以为自己回来了,接着会再点一次——仍在本页。两次失败后才会去找真正的返回。反之,若产品把向上箭头做成返回,深页用户本想看标题或筛选,却被弹出这一页,阅读位置和未提交的筛选一起丢掉。

混淆在移动端更重:边缘滑动、顶栏返回、悬浮向上箭头可能同时存在,却没有分清「页内原点」和「栈上上一帧」。桌面浏览器同时有系统返回和页内按钮,文案或位置一旦相似,误触会导航到站外。

边界

单页应用把「返回」实现成滚到上一个锚点时,语义本就在页内,这时回到顶部与返回可能是不同程度的页内跳转,必须用文案分开(「到页首」对「上一项」)。嵌入 WebView 没有浏览器返回时,页内向上更容易被当成唯一出口,更不能只用箭头。阅读器「上一章」也是向上隐喻,和到页首冲突。短页上若同时露出返回和到页首,几乎必然点错——短页本不该有到页首。

怎么落地

  • 到页首的控件写清「顶部」或「到页首」,不要只用无说明的向上箭头;返回保持系统或顶栏的返回语义与位置。
  • 不要把到页首放在左上返回槽,也不要在顶栏返回和悬浮箭头之间共用同一套图标。
  • 激活到页首不得调用历史后退;激活返回不得只改滚动位置。
  • 验证:在长页中部问「离开这一页」和「去看这一页开头」,两次应点到不同控件、落到不同结果。把图标和文案打码再测一次,若两条路仍被当成同一件事,视觉隐喻就混了。

延伸

  • 同组E5.09.1 长页面需要快速返回顶部的入口 · E5.09.2 入口不应遮挡内容与主操作
  • 相邻E5.01 顶部导航栏 · E5.05 面包屑
  • 站内检索back to top · history back · scroll versus navigation

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E5.09.3