数字递增滚动功能如何做

2026-10-02 技术分享

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

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

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

图片1.png

要参与递增的节点加上类名 js-count,初始文字写 0。目标值写在 data-max,每步间隔毫秒写在 data-speed。样式在 css/countUp.css,逻辑在 js/countUp.js,jQuery 必须先引入。

图片2.png

字号、颜色按设计改。不需要百分号就去掉后面的 em。

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

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

图片3.png

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

图片4.png

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

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

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

图片5.png

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

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

两个参数:

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

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

图片6.png

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

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

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

同一区块里多个指标,每个都加 js-count,各自写 data-max、data-speed。统一入口扫一遍:

图片7.png

完整示例:

图片8.png

滚到这一块时,谁进入可视区谁开始加,互不抢同一个定时器。接口若返回真实数据,渲染时把 data-max 写成接口字段即可,递增逻辑不用改。

案例下载
下载demo本地运行
技术分享