如何简化HTML中点击按钮实现页面向上滚动的代码？

方案1：纯HTML+CSS实现（无JS，最简洁） #

利用原生锚点的平滑滚动特性，无需JavaScript，只需基础HTML配合少量CSS即可实现：

<a href="#top" class="back-to-top">Back to Top</a>

添加CSS实现固定定位与样式（可选）：

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 8px 12px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

/* 全局开启平滑滚动 */
html {
  scroll-behavior: smooth;
}

方案2：极简JS实现（兼容自定义场景） #

如果需要自定义滚动逻辑或兼容部分不支持scroll-behavior的旧浏览器，可以用极简JS写法：

HTML：

<button class="back-to-top">Back to Top</button>

JS：

document.querySelector('.back-to-top').onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' });

方案3：超极简内联JS（适合快速演示） #

若追求代码极致简短，可直接将逻辑内联到元素属性中（不推荐用于大型项目，不利于维护）：

<button onclick="window.scrollTo({top:0,behavior:'smooth'})">Back to Top</button>

内容的提问来源于stack exchange，提问作者Shenil Deneth