如何让返回顶部按钮仅在桌面模式下激活显示？

可以通过CSS媒体查询结合JavaScript滚动监听实现需求，具体代码示例如下：

1. HTML结构（确保按钮有唯一ID，可直接复用你现有按钮的ID） #

<button id="backToTop" title="返回顶部">↑ 返回顶部</button>

2. CSS样式（控制按钮的显示逻辑） #

/* 基础样式：默认隐藏按钮 */
#backToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

/* 桌面端（屏幕宽度≥768px）：允许通过JS添加类来显示按钮 */
@media (min-width: 768px) {
  #backToTop.show {
    display: block;
  }
}

/* 移动端（屏幕宽度<768px）：强制隐藏按钮，不受JS逻辑影响 */
@media (max-width: 767px) {
  #backToTop {
    display: none !important;
  }
}

3. JavaScript逻辑（滚动监听+返回顶部功能） #

const backToTopBtn = document.getElementById('backToTop');

// 监听页面滚动事件
window.addEventListener('scroll', () => {
  // 仅在桌面端执行显示逻辑
  if (window.innerWidth >= 768) {
    // 当页面向下滚动超过200px时显示按钮，否则隐藏
    window.pageYOffset > 200 
      ? backToTopBtn.classList.add('show') 
      : backToTopBtn.classList.remove('show');
  }
});

// 点击按钮返回顶部（支持平滑滚动）
backToTopBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 不需要平滑滚动的话，直接替换成window.scrollTo(0, 0)即可
  });
});

关键说明 #

• 媒体查询的宽度阈值（768px）可根据你的响应式断点调整，比如改成1024px适配更大的桌面屏幕。
• 滚动触发显示的距离（200px）可按需修改，比如改成300px让按钮在滚动更多后才出现。
• 移动端通过!important强制隐藏按钮，确保不会因为JS逻辑意外显示。

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