数字递增滚动功能如何做

首页「满意度 98%、项目数 120」这类指标，一般不会一进来就定格，而是页面滚到这里时从 0 往上加。本例用 jQuery 判断是否进入可视区，再用定时器改文字。演示页上方留了一段空白，方便往下滚看效果。

递增数字在页面上如何展示

数字放在带颜色的容器里，大号数字一个 span，单位（如 %）用旁边的 em。本例主色 #2ea7e0，数字 100px、加粗，单位 48px。

要参与递增的节点加上类名 js-count，初始文字写 0。目标值写在 />
字号、颜色按设计改。不需要百分号就去掉后面的 em。

滚动到数字区域时如何触发递增

进入可视区的判断：元素顶部小于「当前滚动距离 + 窗口高度」，说明已经出现在窗口里（或刚好顶到窗口下沿以上）。

页面加载时先检查一次（数字本来就在首屏也能动）；再监听 scroll、resize，滚到了再开加。每个数字用 data(“played”) 记是否播过，避免来回滚动反复从 0 加。

这坑我见过不止一次：只在 $(function(){}) 里调一次，数字在首屏以下时永远不触发。加载和滚动都要查。

数字递增滚动的过程怎么写

进入可视区且未播过时，从 0 开始，每隔 speed 毫秒加 1，加到 max 后清掉定时器并定格在目标值。

timer 是 setInterval 的返回值，结束时必须 clearInterval，否则会空转。目标很大时，间隔太小会显得闪；间隔太大又像一顿一顿的，需要和第 4 节一起调。

目标值和滚动速度如何设置

两个参数：

1、data-max：最终显示的数字

2、data-speed：每加 1 隔多少毫秒，数字越小加得越快

本例满意度 98、间隔 30，大约两三秒加完；同比增长 10、间隔 50，加得更慢、更容易看清。业务里按设计节奏改这两项即可，一般不用改 growNum 函数本身。

需要一次加 2、加 5，或带小数，再在 growNum 里改步进逻辑；本例按整数每次加 1，够覆盖常见统计数字。

多个统计数字如何一起做递增滚动

同一区块里多个指标，每个都加 js-count，各自写 />
完整示例：

滚到这一块时，谁进入可视区谁开始加，互不抢同一个定时器。接口若返回真实数据，渲染时把>