How to make it so that when you scroll and reach the bottom of the site, statistics numbers quickly begin to be calculated?

Question

css

Good afternoon, I want to make an unobtrusive effect. A person enters the landing page, scrolls, and when it comes to the moment with statistics, the numbers start from zero to quickly count up to a certain amount

Answer 1

$(window).scroll(function() {
        $('#site-promo').each(function(){
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow+300) {
                $('.way-img').addClass("stretchRight vv");
            }
        });
    });

What does the code do?
Takes an id (for example, your block with numbers that need to be animated), when the user scrolls to this block, 300 pixels before this block, the animation is assigned to the .way-img block.
Similarly with your task: insert the ID of the container with numbers into the id, after which you assign an animation to each number, this line is responsible for this (correct for yourself):
$('.way-img').addClass("stretchRight vv");

Answer 2

Alternatively use jquery.animateNumber.
aishek.github.io/jquery-animateNumber
And use a condition to trigger it something like this:
if (($(document).scrollTop() + $(window).height()) > ($('.animate- number-block').offset().top + 100)) {
animate_number();
}