如何实现仅在页面滚动一定距离后显示的返回顶部按钮？

基于你已有的代码，我们可以通过添加CSS过渡动画和滚动事件监听来实现需求，以下是修改后的完整代码及说明：

完整代码 #

HTML #

<div id="top">hello world</div>
<div id="content">content</div>

<button id="toTopBtn" onclick="toTop()">回到顶部</button>

CSS #

#content {
  width: 100%;
  height: 1000px;
  background-color: blue;
}

* {
  scroll-behavior: smooth;
}

#toTopBtn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  cursor: pointer;
}

#toTopBtn.show {
  opacity: 1;
  visibility: visible;
}

JavaScript #

function toTop() {
  document.getElementById('top').scrollIntoView();
}

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  const backToTopBtn = document.getElementById('toTopBtn');
  // 设定滚动阈值，这里是300px，可根据需求调整
  if (window.scrollY > 300) {
    backToTopBtn.classList.add('show');
  } else {
    backToTopBtn.classList.remove('show');
  }
});

// 可选：添加防抖优化，减少滚动事件触发频率（提升性能）
function debounce(func, delay = 100) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// 替换上面的scroll事件监听为防抖版本
// window.addEventListener('scroll', debounce(function() {
//   const backToTopBtn = document.getElementById('toTopBtn');
//   if (window.scrollY > 300) {
//     backToTopBtn.classList.add('show');
//   } else {
//     backToTopBtn.classList.remove('show');
//   }
// }));

关键实现说明 #

• CSS过渡动画：给按钮初始设置opacity: 0和visibility: hidden，通过transition属性绑定opacity和visibility的变化，添加show类时触发淡入效果，移除时触发淡出效果。使用visibility是为了确保按钮隐藏时不会响应点击事件。
• 滚动事件监听：通过window.scrollY获取当前滚动距离，当超过设定的阈值（比如300px）时为按钮添加show类显示，回到阈值内则移除类隐藏。
• 防抖优化（可选）：滚动事件会频繁触发，防抖函数可以限制事件处理函数的执行频率，避免不必要的性能消耗，适合页面内容较多的场景。

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