实现回到顶部效果除了用 js 可以实现之外还可以用锚链接实现,把 a 标签的 href 的属性设置为”#”时,点击该标签就会回到顶部,但是这种方式从用户体验的角度上来讲并不是很好。这里主要介绍如何利用 js 来实现这个功能,并提供较好的用户体验。
需求
- 滚动条距离顶部较远时显示返回顶部按钮,较近时不显示。
- 鼠标未放到返回顶部按钮上时,返回按钮显示向上的箭头,鼠标放在上面时显示“返回顶部”字样。
- 返回顶部的速度随着滚动条到顶部的距离减小而减小。
- 再返回顶部的过程中,如果滚动鼠标滚轮可以暂停到当前位置。