HTML5回到顶部按钮实现教程

本文详细讲解了如何利用HTML5原生API（如scrollIntoView()和window.scrollTo()）实现流畅、高性能且无障碍的“回到顶部”功能，涵盖平滑滚动、滚动监听动态显隐按钮、requestAnimationFrame性能优化以及键盘可访问性支持等关键实践，帮助开发者构建兼容性强、用户体验佳、符合现代Web标准的长页面导航解决方案。

如果您希望用户在长页面中快速返回顶部，HTML5 提供了多种原生和兼容性良好的方式实现平滑滚动与回到顶部功能。以下是实现该功能的具体步骤：

一、使用 scrollIntoView() 方法实现回到顶部

scrollIntoView() 是 HTML5 原生提供的 DOM 方法，可使目标元素滚动到视口可见区域。将 body 或 document.documentElement 作为目标调用该方法，即可实现回到顶部效果，且支持平滑滚动行为。

1、在页面底部或固定位置添加一个按钮，设置 id 为 "backToTop"：
回到顶部

2、在