如何为滚动200px触发显示的返回顶部按钮添加平滑显示动画？

要实现按钮的平滑显示/隐藏，核心是替换display属性为支持CSS过渡的opacity和visibility——因为display无法触发过渡动画。以下是修改后的完整实现：

修改后的CSS代码 #

#btnScrollToTop {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  color: #000;
  font-size: 22px;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 1000;
  /* 为可见性和透明度添加过渡动画 */
  transition: all 0.3s ease-in-out;
}

/* 激活类：控制按钮显示 */
#btnScrollToTop.active {
  opacity: 1;
  visibility: visible;
}

#btnScrollToTop:hover {
  color: #fff;
  background-color: #ffb038;
  border: 1px solid #000;
}

修改后的JS代码 #

let mybutton = document.getElementById("btnScrollToTop");

window.onscroll = scrollFunction;

function scrollFunction() {
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
    mybutton.classList.add("active");
  } else {
    mybutton.classList.remove("active");
  }
}

const btnScrollToTop = document.querySelector("#btnScrollToTop");
btnScrollToTop.addEventListener("click", function() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth"
  })
});

HTML代码（无需修改） #

<button id="btnScrollToTop">
      <i class="fa-solid fa-arrow-up"></i>
</button>

效果说明 #

• 页面滚动超过200px时，按钮会通过淡入效果平滑显示
• 滚动回到200px以内时，按钮会通过淡出效果平滑隐藏
• 按钮的hover样式也会继承过渡动画，保持交互的流畅性

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