求助：在HTML离线亭机模式页面底部中央添加回到顶部按钮

直接给你一套简单易上手的代码方案，分三步完成：

1. 添加HTML按钮元素 #

在你的页面</body>标签前插入这个按钮：

<button id="backToTop">回到顶部</button>

2. 用CSS固定定位到底部中央 #

在你的样式表（或者<style>标签里）添加以下样式：

#backToTop {
  /* 固定定位，不随页面滚动移动 */
  position: fixed;
  /* 距离底部20px，可按需调整 */
  bottom: 20px;
  /* 水平居中：先移到屏幕50%位置，再向左偏移自身宽度的一半 */
  left: 50%;
  transform: translateX(-50%);
  /* 适配触摸屏的按钮大小 */
  padding: 15px 25px;
  /* 基础样式，可根据页面风格调整 */
  background-color: #333;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  /* 确保按钮在其他内容上方显示 */
  z-index: 100;
}

/* 触摸/点击时的反馈效果 */
#backToTop:hover, #backToTop:active {
  background-color: #555;
}

核心逻辑是position: fixed配合left: 50%和transform: translateX(-50%)，这能保证按钮始终在底部中央，不受屏幕宽度变化影响。

3. 用JS实现回到顶部功能 #

在页面末尾添加这段脚本：

document.getElementById('backToTop').addEventListener('click', function() {
  // 平滑滚动到页面顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});

如果不需要平滑滚动效果，直接替换成window.scrollTo(0, 0)即可。

把这三部分加到你的现有代码里，就能实现预期的底部中央触摸回到顶部按钮了。

内容的提问来源于stack exchange，提问作者Emily J.