原生JavaScript实现带延迟的页面上下滚动循环功能

你需要的是不依赖jQuery，实现页面在顶部和底部之间循环滚动，且滚动前后带10秒延迟的功能，下面是对应原生JavaScript实现代码，效果和你提供的jQuery代码完全一致：

参考你的jQuery实现代码：

function scrollToTop() {
  setTimeout(function() {
    $('html, body').animate({ scrollTop: 0 }, {
      duration: 10000,
      complete: function() {
        scrollToBottom();
      }
    });
  }, 10000);
}

function scrollToBottom() {
  setTimeout(function() {
    $('html, body').animate({ scrollTop: $(document).height() }, {
      duration: 10000,
      complete: function() {
        scrollToTop();
      }
    });
  }, 10000);
}

scrollToBottom();

原生JS实现代码 #

// 滚动到顶部函数
function scrollToTop() {
  // 滚动前延迟10秒
  setTimeout(() => {
    // 获取当前滚动位置（兼容不同浏览器）
    const startScroll = document.documentElement.scrollTop || document.body.scrollTop;
    const targetScroll = 0;
    const duration = 10000; // 滚动时长10秒
    let startTime = null;

    // 平滑滚动动画逻辑
    function animateScroll(timestamp) {
      if (!startTime) startTime = timestamp;
      // 计算动画进度
      const progress = timestamp - startTime;
      // 用缓动函数计算当前滚动位置
      const scrollPosition = easeInOutCubic(progress, startScroll, targetScroll - startScroll, duration);
      
      // 设置滚动位置（兼容不同浏览器）
      document.documentElement.scrollTop = scrollPosition;
      document.body.scrollTop = scrollPosition;

      // 动画未完成则继续
      if (progress < duration) {
        requestAnimationFrame(animateScroll);
      } else {
        // 滚动完成后触发反向滚动
        scrollToBottom();
      }
    }

    requestAnimationFrame(animateScroll);
  }, 10000);
}

// 滚动到底部函数
function scrollToBottom() {
  // 滚动前延迟10秒
  setTimeout(() => {
    const startScroll = document.documentElement.scrollTop || document.body.scrollTop;
    // 计算底部目标位置：文档总高度 - 视口高度
    const targetScroll = document.documentElement.scrollHeight - window.innerHeight;
    const duration = 10000; // 滚动时长10秒
    let startTime = null;

    function animateScroll(timestamp) {
      if (!startTime) startTime = timestamp;
      const progress = timestamp - startTime;
      const scrollPosition = easeInOutCubic(progress, startScroll, targetScroll - startScroll, duration);
      
      document.documentElement.scrollTop = scrollPosition;
      document.body.scrollTop = scrollPosition;

      if (progress < duration) {
        requestAnimationFrame(animateScroll);
      } else {
        scrollToTop();
      }
    }

    requestAnimationFrame(animateScroll);
  }, 10000);
}

// 缓动函数：和jQuery animate默认的easeInOutCubic效果一致，让滚动更自然
function easeInOutCubic(t, b, c, d) {
  t /= d/2;
  if (t < 1) return c/2*t*t*t + b;
  t -= 2;
  return c/2*(t*t*t + 2) + b;
}

// 启动循环，从滚动到底部开始
scrollToBottom();

关键细节说明 #

• 缓动函数：加入easeInOutCubic是为了让滚动动画和jQuery默认的动画曲线一致，避免生硬的线性滚动
• 浏览器兼容：同时设置document.documentElement.scrollTop和document.body.scrollTop，适配Chrome、Firefox等不同浏览器的滚动容器差异
• 精准底部位置：计算底部滚动位置时减去window.innerHeight，因为scrollHeight是文档总高度，只有减去视口高度才是页面真正滚动到底的位置
• 流畅动画：使用requestAnimationFrame实现动画，比setInterval更贴合浏览器刷新频率，滚动过程更流畅

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