jQuery返回顶部按钮问题：无法实现滚动超300时显示

嘿，我帮你排查了下这个问题，咱们几个小调整就能搞定～

可能的问题点&修复方案 #

首先，咱们先理清楚为什么你的滚动显示逻辑没生效：

• DOM元素未正确获取/事件绑定时机不对：如果你的JS代码在DOM加载完成前就执行了，那btn变量可能找不到对应的按钮元素，自然没法添加/移除类。
• 初始CSS状态缺失：按钮默认应该是隐藏的，不然一开始就会显示，达不到“滚动后才出现”的效果。
• 代码可以更简洁，用toggleClass简化判断逻辑

修正后的完整代码示例 #

HTML

<button id="backToTop" class="back-to-top">返回顶部</button>

CSS

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 15px;
  background: #333;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  /* 默认隐藏按钮 */
  display: none;
  transition: opacity 0.3s;
}

.back-to-top.show {
  /* 显示按钮 */
  display: block;
  /* 也可以用透明度做过渡效果，更丝滑 */
  /* opacity: 1; */
}

JavaScript

$(function() {
  // 确保DOM加载完成后再获取元素
  const btn = $('#backToTop');

  // 滚动事件处理
  $(window).scroll(function() {
    // 用toggleClass简化判断：第二个参数是布尔值，true就加类，false移除
    btn.toggleClass('show', $(window).scrollTop() > 300);
  });

  // 返回顶部的点击事件
  btn.click(function() {
    $('html, body').animate({ scrollTop: 0 }, 500);
  });
});

关键修改说明 #

1. 包裹在$(function(){})中：这是jQuery的DOM就绪函数，确保代码在页面元素都加载完成后执行，避免找不到按钮元素的问题。
2. 默认隐藏按钮：在.back-to-top的CSS里设置display: none;，初始状态不显示。
3. 简化滚动逻辑：用toggleClass替代手动的addClass/removeClass，代码更简洁易维护。

这样调整后，按钮就会在页面滚动超过300px时显示，否则隐藏，同时返回顶部的功能也能正常工作啦～

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