如何实现点击返回页面顶部的按钮，且顶部隐藏、滚动后自动显示

实现方案 #

只需额外添加滚动监听逻辑，配合少量样式控制即可实现需求，总共分两步：

1. 补充按钮显隐相关CSS

先给按钮设置默认隐藏的样式，你可以根据需求选直接切换显隐或者加过渡动画的版本：

/* 你原有按钮的基础样式，可保留你之前写的定位、大小、图标样式 */
#btnScrollToTop {
  position: fixed;
  bottom: 24px;
  right: 24px;
  cursor: pointer;
  /* 最简版本：默认隐藏 */
  display: none;
  /* 如果要丝滑过渡效果，把上面display注释，用下面的配置：
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  */
}

/* 用过渡效果时需要加的显示类，不需要过渡可以删掉 */
#btnScrollToTop.show {
  opacity: 1;
  visibility: visible;
}

2. 新增JS滚动监听逻辑

在你原有点击返回逻辑的基础上，添加滚动事件监听，判断滚动距离控制按钮显隐，加了节流逻辑避免性能损耗：

const btnScrollToTop = document.querySelector('#btnScrollToTop');
// 你原有的点击返回顶部逻辑
btnScrollToTop.addEventListener("click", function() {
    window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth"
    });
});

// 新增滚动控制显隐逻辑
const showScrollThreshold = 300; // 滚动超过300px时显示按钮，可自行调整数值
let throttleTimer = null;

window.addEventListener('scroll', () => {
  // 节流优化，避免滚动事件频繁触发计算
  if (throttleTimer) return;
  throttleTimer = setTimeout(() => {
    if (window.pageYOffset > showScrollThreshold) {
      // 用display切换的版本
      btnScrollToTop.style.display = 'block';
      // 用过渡效果的版本，把上面一行注释，用下面的：
      // btnScrollToTop.classList.add('show');
    } else {
      btnScrollToTop.style.display = 'none';
      // 用过渡效果的版本，把上面一行注释，用下面的：
      // btnScrollToTop.classList.remove('show');
    }
    throttleTimer = null;
  }, 100);
});

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