如何实现滚动到指定div后触发计数器函数，解决页面加载就执行的问题

架构老林

2026-10-6

问题原因及修复方案

1. 核心错误点

选择器错误：你绑定waypoint的选择器$('.counters counters2')无效，HTML中不存在counters2类的元素，waypoint没有绑定到正确的计数器容器上，导致触发逻辑失效
缺少waypoint触发配置：未指定offset和triggerOnce参数，默认规则下可能页面加载就直接触发回调
语法错误：JS代码末尾多了多余的闭合大括号}，会导致逻辑异常
计数逻辑冗余：定义了inc变量但未实际使用，直接写count + 3会让speed参数失效，还可能出现计数超过目标值的问题

2. 修复后代码

先确保你已经按顺序引入jQuery和jQuery Waypoint插件，再替换原有JS代码即可：

$('.counters').waypoint(function() {
    const counters = document.querySelectorAll('.counter');
    const speed = 50; // 数值越小计数速度越慢

    counters.forEach(counter => {
        const updateCount = () => {
            const target = +counter.getAttribute('data-target');
            const count = +counter.innerText;
            const inc = Math.ceil(target / speed); // 取整避免出现小数

            if (count < target) {
                counter.innerText = count + inc;
                setTimeout(updateCount, 20); // 可调整毫秒数控制动画流畅度
            } else {
                counter.innerText = target;
            }
        };
        updateCount();
    });
}, {
    offset: '80%', // 元素顶部进入视口80%位置时触发，可自行调整数值
    triggerOnce: true // 只触发一次，避免滚动时重复计数
});