JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Прокрути страницу.<h1>

<div class="counter" data-action="counter" data-value="56">0</div>
<div class="counter" data-action="counter" data-value="78">0</div>
<div class="counter" data-action="counter" data-value="45">0</div>

CSS

h1 {
    margin: 0 10px 1000px;
}

.counter {
    display: inline-block;
    
    width: 80px;
    height: 80px;
    
    margin: 0 10px;
    
    background: #fbfbfb;
    border-radius: 50%;
    border: 1px solid #d8d8d8;
    
    text-align: center;
    font: italic 700 26px/75px 'georgia';
}

JavaScript

$.fn.counter = function(options) {
    
    options = $.extend({
        'type': 'onload', // onload | onscroll
        'duration': 500
    }, options);
    
    var counter = $('[data-action="counter"]').data('text', 0),
        increase;
    
    increase = function(target) {
        
        var value = target.data('value'),
            newInterval;
        
        newInterval = setInterval(function() {
            
            var newVal = target.data('text') + 1;                        
            target.text(newVal).data('text', newVal);
            
        }, options.duration / value);
        
        setTimeout(function() {
            
            clearInterval(newInterval);
            target.text(value).data('complete', true);
            
        }, options.duration);
    
    };
    
    if (options.type === 'onload') {
        
        counter.each(function() {            
            increase($(this));
        });
    
    }
    
    if (options.type === 'onscroll') {
    
        $(window).scroll(function() {
		
            var scrollPos = $(this).scrollTop() + $(this).height();
            
            counter.each(function() {
                
                if ($(this).data('complete')) return false;
                
                var offsetTop = $(this).offset().top;
                
                if (scrollPos >= offsetTop) {
                    $(this).data('complete', true);
                    increase($(this));
                };
                
            });
            
        });
    
    }    

};

$.fn.counter({
    'type': 'onscroll', // onload | onscroll
    'duration': 1500
});