Плавное увеличение числа через jQuery

В лэндингах можно часто увидеть помимо красивых анимаций еще и эффект плавного увеличение цифр от одного значения к другому. Данную задачу можно реализовать с помощью css анимации или за счет jQuery скрипта. Рассмотрим второй пример.

Код данного скрипта реализован в основном на Java Script функции, а для его вызова лучше использовать либо конструкцию $(document).ready(function() (тогда потребуется библиотека jQuery), либо просто делать запуск функций плавного увеличения цифр в конце документа.

Код скрипта:

function number_to(id,from,to,duration) {
var element = document.getElementById(id);
var start = new Date().getTime();
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = Math.floor((to - from) * progress + from);
element.innerHTML = progress < 1 ? result : to;
if (progress < 1) setTimeout(arguments.callee, 10);
}, 10);}

//вызов функции
$(document).ready(function() {
number_to("example",900,1500,2000);
number_to("test",10,-5,10000);
});

<div id="example"></div>
<div id="test"></div>

Как видно из скрипта, сначала задается функция number_to. В ней используются следующие параметры:
id - на какой id сработает
from - начальное значение цифры
to - конечное значение цифры
duration - время анимации

Там где "Вызов функции" - происходит запуск скрипта для двух id-ков с параметрами описанными выше. В демонстрации ниже вы можете увидеть как увеличиваются цифры.

Но у скрипта есть серьезный недостаток, - он работает сразу после загрузки страницы. Если у нас длинная страница, а цифры будут где-нибудь снизу, то пользователь просто не увидит анимацию.

Я смог частично решить проблему используя второй метод вывода скрипта через функцию scroll. Когда вы скачаете пример, то во втором методе просто поменяйте число 270 на свое. Оно означает, чколько мы должны прокрутить страницу (в px), чтобы запустился скрипт.