如何实现滚动触发动画数字计数器（纯 HTML/CSS/JS 教程）-js教程-PHP中文网

如何实现滚动触发动画数字计数器（纯 HTML/CSS/JS 教程）

本文详解如何使用原生 web 技术（html、css、javascript）实现“滚动到指定区域时，数字从 0 动画递增至目标值”的交互效果，并提供可复用代码、性能优化建议及 react 方案对比。

本文详解如何使用原生 web 技术（html、css、javascript）实现“滚动到指定区域时，数字从 0 动画递增至目标值”的交互效果，并提供可复用代码、性能优化建议及 react 方案对比。

在现代网页中，动态数字计数器（如“完成项目：500”“经验年限：10”）常用于统计模块，提升视觉表现力与用户参与感。其核心逻辑是：当用户滚动页面、使计数器区域进入视口时，触发数字从 0 开始平滑动画增长至预设值；一旦启动即只执行一次，避免重复触发。

以下是一个轻量、无依赖（仅需 jQuery）、结构清晰的实现方案：

✅ 基础 HTML 结构

为每个待动画的数字添加 class="counter"，并用 id="counter" 包裹整个统计区块，便于监听滚动位置：

<section id="counter" class="statistics"><div class="stastic">
    <h4 class="counter">500</h4>
    <p>Projects Done</p>
  </div>
  <div class="stastic">
    <h4 class="counter">10</h4>
    <p>Years Experience</p>
  </div>
  <div class="stastic">
    <h4 class="counter">100</h4>
    <p>Success Rate</p>
  </div>
</section>

? 注意：目标值直接写在元素文本中（如 <h4 class="counter">500</h4>），便于 JS 读取，语义清晰且利于 SEO 和无障碍访问。

HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

? 简洁 CSS 布局（响应式网格）

使用 CSS Grid 实现三列自适应布局，兼顾移动端：

.statistics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  padding: 2rem 1rem;
}
.stastic {
  text-align: center;
  background-color: #ffefdb;
  border-radius: 8px;
  padding: 1.5rem;
}
.stastic h4 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  color: #e67e22;
}
.stastic p {
  margin-top: 0.5rem;
  color: #666;
  font-size: 1rem;
}

⚙️ 核心 JavaScript 逻辑（jQuery 版）

关键点在于 节流判断 + 单次触发 + 数值动画：

let counterStarted = false;

$(window).on('scroll', function () {
  const $counterSection = $('#counter');
  const sectionTop = $counterSection.offset().top;
  const windowHeight = $(window).height();
  const scrollPos = $(window).scrollTop();

  // 当前滚动位置已到达计数器区域顶部（预留视口缓冲）
  if (!counterStarted && scrollPos + windowHeight >= sectionTop) {
    $('.counter').each(function () {
      const $el = $(this);
      const target = parseInt($el.text(), 10) || 0;

      $({ count: 0 }).animate(
        { count: target },
        {
          duration: 2000,
          easing: 'swing',
          step: (now) => $el.text(Math.ceil(now)),
          complete: () => $el.text(target) // 防止小数舍入误差
        }
      );
    });
    counterStarted = true; // 锁定，确保只执行一次
  }
});

✅ 优势说明：

使用 scroll 事件结合 offset().top 判断可见性，兼容性好；

counterStarted 标志位防止多次触发，节省性能；

Math.ceil() 保证整数显示，complete 回调兜底修正最终值；

动画时长（2000ms）与缓动（swing）可按需调整。

? 关于是否使用 React？

该效果完全无需 React即可高效实现：

DOM 操作简单，无复杂状态管理；
jQuery 动画足够稳定，体积小（
若项目已用 React，可用 useEffect + useRef + IntersectionObserver 替代（更现代、性能更优），但对纯静态页或轻量站点属过度工程化。
✅ 推荐优先采用原生方案，兼顾加载速度、维护成本与兼容性。

? 注意事项与进阶提示

性能优化：生产环境建议将 scroll 事件改为 IntersectionObserver（原生 API，无抖动、自动节流），尤其在长页面中；
无障碍支持：为 .counter 元素添加 aria-live="polite"，使屏幕阅读器能播报数值变化；
百分比/带单位数字：若目标值含 % 或 +（如 100%），需先正则提取纯数字：target = parseInt($el.text().replace(/\D/g, ''), 10)；
多语言适配：避免硬编码数字，可从 data-value 属性读取：<h4 class="counter" data-value="500">0</h4>。