答案：通过创建固定按钮并监听滚动 事件 ，使用window.scrollTo() 实现平滑返回顶部功能。首先在 html 中添加按钮元素，用 css 将其定位在右下角并默认隐藏；当页面滚动超过 200 像素时，通过 scroll 事件显示按钮；点击按钮时调用 window.scrollTo({top: 0, behavior: ‘smooth’})实现平滑滚动；为兼容老旧 浏览器，可采用 requestAnimationFrame 结合递减滚动值模拟动画效果，最终实现轻量高效的返回顶部功能。
页面滚动到顶部的 javaScript 功能很常见，尤其在长网页中，添加一个“返回顶部”按钮能显著提升用户体验。实现这个功能并不复杂，下面详细介绍如何用原生javascript 编写一个实用的返回顶部脚本。
1. 创建返回顶部按钮结构
先在 HTML 中添加一个按钮元素，通常放在页面底部或固定在右下角：
<button id="backToTopBtn"> 回到顶部 </button>使用 CSS 将其定位为固定位置，并默认隐藏：
#backToTopBtn {position: fixed; bottom: 30px; right: 30px; padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; display: none; /* 滚动一定距离后显示 */ font-size: 14px;} #backToTopBtn:hover {background-color: #0056b3;}2. 监听滚动事件控制按钮显示
当用户向下滚动一定距离（如 200 像素）后，显示按钮；回到顶部时再次隐藏。
const backToTopBtn = document.getElementById('backToTopBtn'); <p>window.addEventListener('scroll', () => {if (window.pageYOffset > 200) {backToTopBtn.style.display = 'block';} else {backToTopBtn.style.display = 'none';} });</p>3. 实现平滑滚动到顶部
点击按钮时，让页面平滑滚动回顶部。可以使用 window.scrollTo() 方法结合选项参数实现平滑动画：
backToTopBtn.addEventListener('click', () => {window.scrollTo({ top: 0, behavior: 'smooth'}); });这个方法无需第三方库，利用 浏览器 原生支持的 smooth behavior 即可实现流畅效果。
4. 兼容不支持平滑滚动的浏览器
如果需要兼容老旧浏览器（如 IE），可以用定时器模拟平滑滚动：
function smoothScrollToTop() { const currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) {window.requestAnimationFrame(smoothScrollToTop); window.scrollTo(0, currentScroll - currentScroll / 8); } } <p>backToTopBtn.addEventListener('click', smoothScrollToTop);</p>这段代码通过 requestAnimationFrame 实现更流畅的动画效果，逐步减小滚动位置直到顶部。
基本上就这些。一个完整的返回顶部功能只需几十行代码，结合 css 样式 和事件监听就能高效运行。关键是根据实际需求选择原生平滑滚动还是手动实现兼容方案。
