Así que tengo un contador, y cuando me desplazo a div, debería comenzar a contar, pero comienza a contar justo cuando se carga toda la página.

Contadores en un sitio web:

Código HTML de los contadores:

 <section class="counters"> <div class="container2"> <div> <i class="far fa-smile"></i> <div class="counter" data-target="232">0</div> <p>Happy Clients consequuntur quae</p> </div> <div> <i class="fas fa-book"></i> <div class="counter" data-target="521">0</div> <p>Projects adipisci atque cum quia aut</p> </div> <div> <i class="fas fa-headphones"></i> <div class="counter" data-target="1463">0</div> <p>Hours Of Support aut commodi quaerat</p> </div> <div> <i class="fas fa-user-friends"></i> <div class="counter" data-target="15">0 </div> <p>Hard Workers rerum asperiores dolor</p> </div> </div> </section>

Código de la función:

 $('.counters counters2').waypoint(function() { const counters = document.querySelectorAll('.counter'); const speed = 50; // The lower the slower counters.forEach(counter => { const updateCount = () => { const target = +counter.getAttribute('data-target'); const count = +counter.innerText; // Lower inc to slow and higher to slow const inc = target / speed; // console.log(inc); // console.log(count); // Check if target is reached if (count < target) { // Add inc to count and output in counter counter.innerText = count + 3; // Call function every ms setTimeout(updateCount, 1); } else { counter.innerText = target; } }; updateCount(); }); }); }

Así que usé waypoint de jquery para activar la función cuando me desplazo a div, pero por alguna razón, la función se activa cuando se carga la página, sin desplazarme al div específico.