1、“BackTop”控件简介
网页右下角（一般）“BackTop”的按钮，以帮助用户快速回到当前页的顶部。
2、使用场景
2.1 页面太长（3屏高度以上）时；
2.2 需要回到顶部做查看内容或操作时；
3、两个细节
“回到顶部”过程中的两个小细节，一是出现“BackTop”按钮的时机，二是回到顶部的动画和速度：
3.1、时机：滚动一定高度后出现“BackTop”按钮，滚动不同高度出现“BackTop”按钮的细小差异，给用户带来的感受差异：
3.1.1 滚动高度小于0.8屏：页面还处于顶部的位置，在顶部位置出现“BackTop”的按钮，此时使用场景上没有这个需要，因为本身就处在顶部，在逻辑上也存在矛盾；
3.1.2 滚动高度0.8 - 1屏：此时第一屏未完全消失，第二屏内容已经展示0.8 - 1屏，屏幕内容即有第一屏内容，又有第二屏内容，此时告知用户可以回到顶部，是提前给用户以预期，给用户以安全感；
3.1.3 滚动高度大于等于1屏：第一屏完全消失，屏幕内容为第二屏内容，此时出现 “BackTop”，此时告诉用户可以回到顶部，错过了提前告知用户的时机；
3.2、点击“BackTop”回到顶部的动画与速度
3.2.1 动画：从当前位置回到顶部的动画，是直接跳转回到顶部，还是滚动回到顶部？个人感受如下：
跳转：一瞬间跳到顶部，和跳转到新页面的效果类似，不确定是在当前页面还是跳转到新的页面，不能给用户清晰的确定性；
滚动：从当前位置以一定的速度往上滚动到页面顶部，让用户明确知道，是在当前页面的滚动，并没有做页面跳转；
3.2.2 动画方式使用“跳转”的方式时，是一瞬间的，没有速度的问题，当动画方式是“滚动”的方式时，速度上需要从以下维度做考量：
回到顶部的时长：因为回到顶部最基本的作用就是快速回到页面顶部，故速度是第一考量因素，固定时间长度为0.4秒；（手工测试主流电商网站回到顶部的平均时长）
回到顶部的位置（距离）：此距离是变化的，随着页面滚动的不同，距离不同，考虑在页面最底部的位置，以及在页面出现“TOP”按钮的位置，根据页面总长度适当调整回到顶部的时间，但不超过0.6秒；
回到顶部的速度：速度太快会把当前页面快速在你眼前刷过一遍，给人以眼花缭乱的眩晕感觉，比较不舒服，所以需要适当控制一下速度，在距离不长时，可降低滚动速度；
4、“BackTop”按钮规则小结
结合以上，“BackTop”按钮在实现上的交互说明如下规则：
4.1、页面滚动高度在“0.8屏”以内不显示“TOP”按钮，超过“0.8屏”以上显示“TOP”按钮；
4.2、从当前位置回到顶部的时间固定为0.4秒，页面太长时可适当调整到0.6秒，点回“TOP”按钮后，匀速滚动回当前页面的顶部，（页面短，滚动速度低，页面长，滚动速度高，总时长固定）；
4.3、回到顶部过程中不刷新页面；
网友评论