如何实现页面循环自动滚动？滚动到底部后返回顶部重滚的方案咨询

没问题，我来帮你搞定这个连续滚动的需求！你现在的代码已经实现了基础的自动向下滚动，只需要加上滚动到底部的检测逻辑，再配合重置滚动的动作就能完成循环滚动了。

核心思路 #

1. 检测页面是否滚动到底部：通过对比当前滚动位置、窗口高度和文档总高度来判断
2. 到达底部时，先停止当前的滚动定时器
3. 平滑滚动回页面顶部
4. 回到顶部后，重新启动自动向下滚动的定时器

修改后的完整代码 #

JavaScript 部分

$(document).ready(function() {
  let scrollTimer;
  // 定义自动滚动的函数
  function startAutoScroll() {
    scrollTimer = setInterval(function() {
      window.scrollBy(0, 1);
    }, 20);
  }

  // 初始化启动滚动
  startAutoScroll();

  // 监听滚动事件，检测是否到底部
  $(window).scroll(function() {
    // 计算是否到达页面底部
    const isAtBottom = window.scrollY + window.innerHeight >= document.documentElement.scrollHeight;
    if (isAtBottom) {
      // 停止当前滚动
      clearInterval(scrollTimer);
      // 平滑滚动回顶部，动画完成后重新启动滚动
      $('html, body').animate({ scrollTop: 0 }, 500, function() {
        startAutoScroll();
      });
    }
  });
});

CSS 部分（保持你的原有代码不变）

.content { height: 500px; width: 100%; background-color: #cccccc; } 
.inner-content { height: 80px; width: 100%; margin: 10px 0 10px 0; background-color: #ff00ff; } 
h1 { text-align: center; }

HTML 部分（保持你的原有代码不变）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row content">
  <div class="col-md-12 inner-content">
    <h1>One</h1>
  </div>
  <div class="col-md-12 inner-content">
    <h1>Two</h1>
  </div>
  <div class="col-md-12 inner-content">
    <h1>Three</h1>
  </div>
  <div class="col-md-12 inner-content">
    <h1>Four</h1>
  </div>
  <div class="col-md-12 inner-content">
    <h1>Five</h1>
  </div>
</div>

关键细节说明 #

• 定时器管理：把定时器变量scrollTimer抽出来，方便在到达底部时用clearInterval停止滚动，避免内存泄漏
• 底部检测逻辑：window.scrollY是当前滚动的垂直距离，window.innerHeight是浏览器窗口的可视高度，document.documentElement.scrollHeight是整个文档的总高度，三者对比就能准确判断是否到底部
• 平滑回顶：用jQuery的animate方法实现平滑滚动，动画时长设为500毫秒（可以根据需求调整），动画完成后再调用startAutoScroll重启滚动，保证循环的连贯性

如果需要调整滚动速度，只需要修改setInterval里的时间间隔（20毫秒）或者每次滚动的距离（scrollBy(0, 1)里的1）就可以啦！

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