如何使我的滚动到顶部按钮在滚动后出现

<button id="scrollToTopBtn">返回顶部</button>

#scrollToTopBtn {
  position: fixed; /* 固定定位 */
  bottom: 20px; /* 距离底部的距离 */
  right: 20px; /* 距离右边的距离 */
  opacity: 0; /* 初始时设置为透明 */
  transition: opacity 0.3s; /* 添加过渡效果 */
}

#scrollToTopBtn.show {
  opacity: 1; /* 滚动时设置为不透明 */
}

window.addEventListener('scroll', function() {
  var scrollToTopBtn = document.getElementById('scrollToTopBtn');
  if (window.pageYOffset > 100) { /* 当页面滚动距离大于100px时显示按钮 */
    scrollToTopBtn.classList.add('show');
  } else {
    scrollToTopBtn.classList.remove('show');
  }
});

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