html
多了一顆返回頂部的按鈕

<button onclick="scrollToTop()" id="scrollTopButton" title="返回顶部">↑</button>

改{button}id以便單獨調整

<button>更換使用者</button>

<button id="user">更換使用者</button>

css

#scrollTopButton {
  display: none; /* 初始状态隐藏按钮 */
  position: fixed; /* 固定在屏幕上 */
  bottom: 20px; /* 距离底部的距离 */
  right: 20px; /* 距离右侧的距离 */
  font-size: 24px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 10px;
}

javascripts

window.onscroll = function () {
    scrollFunction();
};

function scrollFunction() {
    const button = document.getElementById("scrollTopButton");
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        button.style.display = "block"; // 当滚动位置大于20时显示按钮
    } else {
        button.style.display = "none"; // 否则隐藏按钮
    }
}

// 点击按钮时返回顶部
function scrollToTop() {
    document.body.scrollTop = 0; // 兼容旧版本浏览器
    document.documentElement.scrollTop = 0; // 现代浏览器
}