如何实现jQuery滚动至页面底部时自动返回顶部？

原代码存在的问题 #

1. 语法错误：if (fullHeight = 100% ) 使用了赋值运算符=而非比较运算符==/===，且无法直接用百分比判断滚动位置——scrollTop()返回的是像素值，不是百分比。
2. 逻辑缺陷：未正确计算页面底部的触发条件，且未处理滚动事件重复触发的问题，容易导致滚动行为异常。

正确实现方案 #

以下是兼顾兼容性和稳定性的代码实现：

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

CSS

* {
  font-size: 50px;
}
.content {
  min-height: 200vh; /* 确保内容高度超过窗口，能触发滚动 */
}

JavaScript

let isScrolling = false; // 标志位，避免滚动动画过程中重复触发事件

$(window).scroll(function() {
  if (isScrolling) return;

  // 计算滚动相关的关键高度
  const scrollTop = $(window).scrollTop();
  const windowHeight = $(window).height();
  const documentHeight = $(document).height();

  // 判断是否滚动至接近底部（预留20px阈值兼容浏览器差异）
  if (scrollTop + windowHeight >= documentHeight - 20) {
    isScrolling = true;
    // 平滑滚动回顶部，动画完成后重置标志位
    $("html, body").animate({ scrollTop: 0 }, 500, function() {
      isScrolling = false;
    });
  }
});

关键细节说明 #

• 标志位控制：isScrolling用于防止在回滚顶部的动画过程中，再次触发滚动事件，避免出现滚动跳变或循环触发的异常。
• 准确的底部判断：通过scrollTop + windowHeight计算当前可见区域的底部位置，与文档总高度对比，预留20px阈值解决不同浏览器的滚动精度问题。
• 兼容性处理：同时操作html和body元素，确保在Chrome、Firefox、IE等浏览器中都能正常触发滚动。
• 平滑动画：使用animate实现缓动滚动，提升用户体验，避免直接跳转的突兀感。

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