spiritual egotism: Back To Top

Back To Top链接是页内链接的一种。同大多数起导航作用的链接不太一样，它不会将用户引导至新页面，而是回到原有页面页首。

很多网站认为Back To Top链接是友好链接，页面较长时提供Back To Top功能可帮助用户节省时间，避免鼠标滚动拖动垂直滚动条。

然而很多用户体验专家给予了反对意见。

Jakob Nielsen主张避免页内链接（Within-Page Links）。

理由在于页内链接违背用户思维模型。

网站尽量不要使用页内链接，道理同不建议使用PDF文档和点击mailto链接没有任何警示就突然冒出邮箱一样。

用户对点击链接已经产生了非常强烈的思维模型，由以下元素组成：

1 链接会引导至新页面。
2 点击后原页面会消失。
3 窗口加载新页面会取代原有页面。
4 首先看到的是新页面顶端。
5 倒退按钮（Back）会引导至之前浏览的页面。

由于几乎所有链接都如此，用户强烈认为网络都是这样运作的。该思维模型意义重大。

页内链接破坏了用户对链接形成的思维模型所有5个要素：

1 页内链接目的在于窗口滚屏而非指向新页面。这让用户感觉疑惑：用户假设将得到新的信息，但若在点击页内链接前使用滚动条，他们会看到已经看过的内容。

2 原页面并不消失，依然出现在窗口。然而，由于用户认为已到达新页面，他们会尝试区分“新”信息和原信息到底有什么不同——很明显，这是徒劳的。

3 浏览窗口不会加载新页面：依旧是同样的数据，只是位置不同而已。

4用户常发现自己在页面中间而非在页首，没有任何导航条或者其他期望的页首设计元素。

5 点击倒退按钮不会引导至前一页，而是同一页滚屏前的状态。这会造成点击页内链接前使用滚动条回到首页用户的加倍困扰。

Jakob Nielsen认为可以使用页内链接的情况为：

事先考虑用户对网站链接的期望。比如使用mailto链接时明确指引用户点击该链接用户会启动邮箱（比如XXX@XXX.com或者“邮件联系售后服务”）。

必须使用页内链接时亦需要说明点击链接后的结果。

若事先告知，页内链接有3项可接受用途：

1 以字母顺序排序的页面很长时，页首可显示排序字母，并链接至页面相关处。

2 FAQ中可在页首列举所有问题并链接至页面相关处。

3 少数其他情况下页面可以以内容列表形式开始，链接至页面下方相关章节。

这些例外共有一种格式：页面过长，页首上方给出总览，链接至用户需要查看的相关章节。

但即便如此，最好尽可能避免页内链接。只有在页面极长的情况下，节省用户时间才比避免让用户感觉困扰更重要。

当然，由于交互（Interactivity）和导航不同，因此只要用户看来并非是指向新页面的动作，同一页内产生交互当然没有问题。

而“Back to top”链接则可以被避免，因为滚动条可提供一样的功能。通常，单一、常用的交互方式较为合适，避免用户思考为了达到相同目的需要思考选择何种交互方式。思考时间常超过采用捷径所需时间。（页面特别长时例外，但我们首先就应当避免出现特别长的页面。）

也有其他人反对“Back to Top”链接。

他们认为：

Back to Top链接并非总是有用。比如页面或文章很短的网站并不需要。由于整个页面始终可见，用户不需跳回页面顶部。若这类页面出现“Top”链接，点击不会产生任何作用，让人气恼。当前多种屏幕分辨率使得该链接不可用、不必要，这是需要设计是不是用它的另一原因。因此，页面较短的情况下不建议使用Back to Top链接。

同时Back to Top链接存在的重大问题在于：对浏览器导航按钮会产生影响，对浏览历史不利。Back to Top链接和其他链接一样是锚点，点击浏览器“后退”按钮会引导用户到现浏览页面底端，而非前一页。

其他反对意见有：

1 Back to Top链接分散了页面实际内容。网页包括了太多组成元素，增加新的元素会让存在认知障碍的用户使用起来更加困难。

2 页面打印时Back to Top链接没有任何意义。（可通过CSS来阻止打印时显示，但大多网站不会这样做。）

3 Back to Top链接阻碍用键盘跳转链接的使用。键盘可替代鼠标点击，对于一些用户尤其有用，比如肌肉运动障碍者。此外很多人更倾向于使用键盘，因为比使用鼠标更快捷。

4 同时，使用Back to Top链接扰乱了基于语音的用户代理。没有人愿意在使用语音合成器听网页内容的时候在每个段落最后听到“Back to Top”。语音类用户代理通常有自己的链接阅读模式，按顺序阅读网页链接。

5 每个浏览器都有一些移动到页首的内置工具（比如使用Home按钮）。

6 Back to Top链接具有误导性，用户也许不会回到整个页面的顶端。也许链接仅指向文档内部。（因此“To Top”或者“Start of page”更适宜。）

7 “Top”意义模糊。什么顶端？若第一次看到这个词，它究竟是指是页首，网站顶端还是其他？（而每天都有无数人有生以来第一次使用网络。）正因为这样，“Start of page”表述更合适，但少有人用。

8 Back to Top链接在整个网站中并非始终显示。

那么到底是否需要Back to Top链接呢？

我们的结论是：

首先避免页面过长。页面较短时，Back to Top链接不仅无用，而且给用户带来困扰。

若出于某些原因页面无法精简时，可以提供Back to Top链接。此时，该链接传达的是友好的用户体验，也印证了优秀设计源于关注细节这一理论。

当然，其他页内链接也并非需要绝对避免。可用性领域中，没有任何一条规则可以通用于所有情况。

美国政府研究页首使用锚链接（study done by the US government）时得出结论：

信息量丰富的网页页首使用页内链接可帮助用户直接找到所需信息，减少拖动滚动条和浏览时间。可用性测试中，当用户必须拖动滚动条或浏览大量内容来查找信息时，常常失败。

同样重要的是，这些锚链接帮助用户立刻明白页面包括的信息要点。

Back to Top链接的位置：

Back to Top链接最常出现在页脚处。一些设计师长将其放在页脚左端，一些出现在页脚中间，也有在右端的案例。将该链接放在内容区域左端，直接呈现在文章下方的情况也常见。

Back to Top链接还常被用户FAQ、帮助和网站地图，有助于分割章节或段落，帮助用户快速回到有主导航的页首。

Back to Top链接的创建：

创建“Back To Top”链接时，大多数情况下定义一个空锚点，放在＜ｂｏｄｙ＞后即可。

然而，老的浏览器，特别是过时的浏览器难以识别这种标记。另一种解决方案是采用真正的anchor，明确定义并放在＜ｂｏｄｙ＞后。

更新：能够达到相同目的另一种方法是使用wrapper或者header ID，由于它避免了多余标记，因此受到推崇。采用wrapper ID的div-container，可使用以下标记：

当然，链接本身不一定是文字，可以是图片、按钮或其他任何元素，前提是必须符合用户期望，避免用户产生困扰。

Back to Top链接的措辞：

确保访问者能迅速理解链接功能，不会感到困扰。比如“返回”（Return）就不合适，用户无法立刻理解点击后会返回到网站首页、浏览历史中的前一页还是页面顶部。

注意：

设置Back to Top时，应当明确表达的含义是回到首页还是回到页首。“Home”链接与“Back to top”链接两者皆然不同。如果决定采用“Back to top”链接，确保访问者能立刻理解它与“Home”链接的不同之处。