{"id":267589,"date":"2015-11-05T22:42:02","date_gmt":"2015-11-05T19:42:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=267589"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=267589","title":{"rendered":"Smooth scroll \u043d\u0430 AngularJS \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 requestAnimationFrame + \u0441\u043e\u0432\u0435\u0442\u044b \u043f\u043e \u0441\u0442\u0438\u043b\u044e"},"content":{"rendered":"

\u041c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0434\u043b\u044f Angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041e \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u044f \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0437\u0430\u0442\u0435\u044f\u043b \u2014 \u043f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c. \u041f\u043e\u043f\u0443\u0442\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0441\u0432\u043e\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u043f\u0440\u0438\u0451\u043c\u0430\u0445 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0434\u043b\u044f AngularJS.<\/p>\n

<\/a><\/p>\n

\u0412\u043c\u0435\u0441\u0442\u043e \u0432\u0432\u0435\u0434\u0435\u043d\u0438\u044f<\/h4>\n
\u041f\u0440\u0435\u0434\u044b\u0441\u0442\u043e\u0440\u0438\u044f: \u0437\u0430\u0447\u0435\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430?<\/b><\/p>\n
\u041f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f: \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0441\u044f smooth-scroll \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u0438\u0441\u0442\u0438\u0447\u043d\u044b\u043c Angular-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0438 \u043c\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0439 \u043f\u0435\u0440\u0444\u0435\u043a\u0446\u0438\u043e\u043d\u0438\u0441\u0442 \u0437\u0430\u043f\u0440\u0435\u0442\u0438\u043b \u043c\u043d\u0435 \u0442\u044f\u043d\u0443\u0442\u044c \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e jQuery. \u042f \u0441\u0434\u0435\u043b\u0430\u043b `bower search smooth scroll`, \u0443\u0432\u0438\u0434\u0435\u043b \u0442\u0430\u043c \u0442\u0440\u0438-\u0447\u0435\u0442\u044b\u0440\u0435 \u043b\u0438\u0431\u044b \u0434\u043b\u044f Angular, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0430\u0440\u043e\u0447\u043a\u0430 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043f\u0440\u043e \u0442\u043e, \u0432 \u043e\u0434\u043d\u043e\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043a\u043e\u043c\u043c\u0438\u0442 \u0434\u0432\u0443\u0445\u043b\u0435\u0442\u043d\u0435\u0439 \u0434\u0430\u0432\u043d\u043e\u0441\u0442\u0438, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u043c\u0435\u043d\u044f \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0430: \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043a\u043e\u043c\u043c\u0438\u0442 \u043d\u0430 \u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0431\u044b\u043b \u043d\u0435\u0434\u0435\u043b\u044e \u043d\u0430\u0437\u0430\u0434, \u0432\u0435\u0440\u0441\u0438\u044f 2.0.0 (\u0430 \u044d\u0442\u043e \u0443\u0436\u0435 \u043e \u0447\u0435\u043c-\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442) \u0438, \u0441\u0443\u0434\u044f \u043f\u043e \u0434\u043e\u043a\u0435, \u043e\u043d\u0430 \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438 \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u043b\u0430 \u043f\u043e\u0434 \u043c\u043e\u0438 \u043d\u0443\u0436\u0434\u044b (\u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u0441\u043a\u0440\u043e\u043b\u043b \u043f\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044e). \u0411\u044b\u0441\u0442\u0440\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b \u0438 \u0441\u0442\u0430\u043b \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u2014 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u2026 \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0447\u0438\u0442\u0430\u043b \u0434\u043e\u043a\u0443, \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b \u0438 \u0442\u0430\u043a \u0438 \u0441\u044f\u043a \u2014 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u2026 \u041d\u0435\u0434\u043e\u043b\u0433\u043e \u0434\u0443\u043c\u0430\u044f, \u043f\u043e\u043b\u0435\u0437 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0432 \u043d\u0430\u0434\u0435\u0436\u0434\u0435, \u0447\u0442\u043e \u0432 \u0434\u043e\u043a\u0435 \u0434\u043e\u043f\u0443\u0449\u0435\u043d\u044b \u043e\u0448\u0438\u0431\u043a\u0438, \u0438 \u0443\u0436\u0430\u0441\u043d\u0443\u043b\u0441\u044f. \u041f\u0435\u0440\u0432\u0430\u044f \u043c\u044b\u0441\u043b\u044c \u0431\u044b\u043b\u0430: \u00ab\u041a\u0430\u043a \u042d\u0422\u041e \u0441\u043c\u043e\u0433\u043b\u043e \u0434\u043e\u0436\u0438\u0442\u044c \u0434\u043e \u0432\u0435\u0440\u0441\u0438\u0438 2.0.0 \u0441 \u0434\u0435\u0441\u044f\u0442\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0442\u043e\u0440\u043e\u0432 \u0438 \u0442\u0430\u043a\u0438\u043c \u0431\u0440\u0435\u0434\u043e\u043c \u0432 \u043a\u043e\u0434\u0435?\u00bb \u041f\u043e\u043b\u043d\u043e\u0435 \u043d\u0435\u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u043e\u0432 Angular: \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0440\u043d\u043e \u0434\u0430\u0436\u0435 $watch \u043d\u0435 \u0431\u044b\u043b\u043e \u043d\u0430 \u0443\u0441\u043b\u043e\u0432\u0438\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433\u0430; \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u044b \u0443\u0436\u0430\u0441\u043d\u043e: \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0430\u044f \u0438 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441\u043e scope \u0438 attrs, \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u044b \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b; \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 dependency injection: \u043f\u043e\u0432\u0441\u044e\u0434\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0445\u043e\u0442\u044f \u0430\u0432\u0442\u043e\u0440 \u0441\u0430\u043c \u0436\u0435 \u0434\u043b\u044f \u043d\u0438\u0445 \u0441\u0434\u0435\u043b\u0430\u043b \u0441\u0435\u0440\u0432\u0438\u0441, \u0432\u0435\u0437\u0434\u0435 \u0434\u0451\u0440\u0433\u0430\u044e\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 window \u0438 document; \u0432 \u043f\u0430\u0440\u0435 \u043c\u0435\u0441\u0442 \u043a\u043e\u0434 \u043d\u0435\u043e\u0431\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u043e \u043e\u0431\u0451\u0440\u043d\u0443\u0442 \u0432 setTimeout: \u0432\u0438\u0434\u0438\u043c\u043e, \u0430\u0432\u0442\u043e\u0440 \u043d\u0435 \u0434\u043e \u043a\u043e\u043d\u0446\u0430 \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u0437\u0430\u0447\u0435\u043c \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e (\u0438\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0434\u0430\u0436\u0435 \u0431\u044b\u043b \u0431\u0430\u0433), \u0438, \u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0435\u0441\u0442\u044c $timeout; \u0430\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0431\u0435\u0437 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432 (offset, duration…), \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u043b\u0438\u0437\u0438\u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043b\u0438\u0431\u0430\u043c\u0438, \u0438 \u0442.\u0434. \u0414\u043b\u044f \u0442\u0435\u0445, \u043a\u0442\u043e \u043d\u0435 \u0431\u043e\u0438\u0442\u0441\u044f \u0432\u0437\u0433\u043b\u044f\u043d\u0443\u0442\u044c \u0441\u0432\u043e\u0438\u043c\u0438 \u0433\u043b\u0430\u0437\u0430\u043c\u0438 \u2014 \u043b\u0438\u043d\u043a \u0432 \u043a\u043e\u043d\u0446\u0435.<\/p>\n

\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c \u044f \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0434\u0435\u043b\u0430\u043b \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0443\u043b\u043b-\u0440\u0435\u043a\u0432\u0435\u0441\u0442, \u043e\u0441\u043e\u0431\u043e \u043d\u0435 \u0432\u043d\u0438\u043a\u0430\u044f \u0432 \u0432\u0435\u0441\u044c \u043a\u043e\u0434, \u0447\u0442\u043e\u0431\u044b \u0443 \u043c\u0435\u043d\u044f \u0445\u043e\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e (\u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b), \u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0435\u0437\u043b\u0438 \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0435 \u0431\u0430\u0433\u0438 (\u0434\u0451\u0440\u0433\u0430\u043d\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f, \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0440\u0430\u0437), \u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0432\u0435\u0441\u044c \u0444\u0430\u0439\u043b \u0438 \u043f\u043e\u043d\u044f\u043b \u2014 \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e, \u0442\u0443\u0442 \u043d\u0443\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0451, \u0438 \u0442\u0430\u043a\u043e\u0439 \u043f\u0443\u043b\u043b-\u0440\u0435\u043a\u0432\u0435\u0441\u0442 \u0432\u0440\u044f\u0434 \u043b\u0438 \u0430\u0432\u0442\u043e\u0440 \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u043f\u0440\u0438\u043c\u0435\u0442, \u043f\u043b\u044e\u0441 \u2014 \u0442\u0430\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u0444\u0438\u0447, \u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u043a\u0440\u043e\u043b\u043b \u043c\u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u0443\u0436\u0435 \u043a \u0432\u0435\u0447\u0435\u0440\u0443, \u044f \u0440\u0435\u0448\u0438\u043b \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 smooth-scroll \u043d\u0430 Angular. <\/div>\n<\/div>\n

\u0414\u043e\u043b\u0433\u043e \u043d\u0435 \u043c\u043e\u0433 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f, \u043d\u0430 \u0447\u0435\u043c \u0430\u043a\u0446\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435: \u043b\u0438\u0431\u043e \u043d\u0430 \u0441\u0430\u043c\u043e\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u043b\u0438\u0431\u043e \u043d\u0430 \u0441\u043e\u0432\u0435\u0442\u0430\u0445 \u043f\u043e \u0441\u0442\u0438\u043b\u044e \u043a\u043e\u0434\u0430, \u043b\u0438\u0431\u043e \u043d\u0430 \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0435\u0451 \u043e\u0442\u043b\u0430\u0434\u043a\u0435\u2026 \u0412 \u0438\u0442\u043e\u0433\u0435 \u0440\u0435\u0448\u0438\u043b \u043f\u0438\u0441\u0430\u0442\u044c, \u043a\u0430\u043a \u043f\u0438\u0448\u0435\u0442\u0441\u044f. \u0422\u0430\u043a \u0447\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043d\u0435\u043c\u043d\u043e\u0436\u043a\u0443-\u0432\u043f\u0435\u0440\u0435\u043c\u0435\u0436\u043a\u0443. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043d\u0435 \u0437\u0430\u043f\u0443\u0442\u0430\u0435\u043c\u0441\u044f.<\/p>\n

\u0426\u0435\u043b\u0438<\/h4>\n
    \n
  1. \u043f\u043b\u0430\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0443\u0441\u043b\u043e\u0432\u0438\u044f<\/li>\n
  2. \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 (\u043a\u0440\u043e\u043c\u0435 AngularJS)<\/li>\n
  3. \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 requestAnimationFrame \u0432\u043c\u0435\u0441\u0442\u043e setTimeout<\/li>\n
  4. \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c: \u043e\u0442\u0441\u0442\u0443\u043f \u043e\u0442 \u0432\u0435\u0440\u0445\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, easing, \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u043b\u0431\u044d\u043a \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438<\/li>\n
  5. \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u0432\u043e\u0451 \u043a\u0443\u043d\u0433-\u0444\u0443<\/s> \u0441\u0432\u043e\u0439 \u0441\u0442\u0438\u043b\u044c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f Angular-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 (\u0432\u0434\u0440\u0443\u0433 \u043a\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043e\u0434\u043a\u0438\u043d\u0435\u0442 \u043d\u043e\u0432\u044b\u0435 \u0438\u0434\u0435\u0438)<\/li>\n
  6. \u0440\u0430\u0437\u0432\u0435\u0441\u0442\u0438 \u0445\u043e\u043b\u0438\u0432\u0430\u0440 (\u043f\u043b\u0430\u043d-\u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c, \u0435\u0441\u043b\u0438 \u0443\u0441\u043f\u0435\u044e \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u043a \u043f\u044f\u0442\u043d\u0438\u0446\u0435) \ud83d\ude42<\/li>\n<\/ol>\n

    \u041f\u043e\u0435\u0445\u0430\u043b\u0438<\/h4>\n
    (function() {  \/\/ \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0432 IIFE, \u0434\u0430\u0431\u044b \u043d\u0435 \u0437\u0430\u0441\u043e\u0440\u044f\u0442\u044c global scope     'use strict'      angular.module('StrongComponents.smoothScroll', [])  \/\/ \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c         .factory('Utils', Utils)                         \/\/ \u0441\u0435\u0440\u0432\u0438\u0441 \u0441 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u043c\u0438         .factory('stScroller', stScroller)               \/\/ \u0441\u0435\u0440\u0432\u0438\u0441, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u043f\u043b\u0430\u0432\u043d\u0443\u044e \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443         .directive('stSmoothScroll', stSmoothScroll)     \/\/ \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 }()); <\/code><\/pre>\n
      \u0422\u0443\u0442 \u0432\u044b \u0443\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u043e\u0434\u043d\u0443 \u0438\u0437 \u043c\u043e\u0438\u0445 \u043b\u044e\u0431\u0438\u043c\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 \u044f\u0437\u044b\u043a\u0430 Javascript \u2014 \u044d\u0442\u043e function hoisting, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043c\u043d\u0435 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c \u0432\u0441\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0448\u0435, \u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u2014 \u0432\u043d\u0438\u0437\u0443, \u0442\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043c\u043e\u0434\u0443\u043b\u044f, \u043d\u0435 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044f \u0432\u0435\u0441\u044c \u043a\u043e\u0434.
      (\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u0442\u0443\u0442 \u0437\u0430\u043c\u0435\u0442\u0438\u043b \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u0443\u044e \u0442\u0435\u043c\u0443 \u0434\u043b\u044f \u0445\u043e\u043b\u0438\u0432\u0430\u0440\u0430)<\/i><\/p>\n
      \u0412 Utils \u0441\u0435\u0439\u0447\u0430\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u2014 extend, \u0432\u0437\u044f\u0442\u0430\u044f \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 Angular \u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b undefined \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437 src \u043d\u0435 \u0437\u0430\u0442\u0438\u0440\u0430\u043b\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438\u0437 dst. \u0412 \u0440\u0435\u043f\u0435 Angular \u043d\u0430 github \u0434\u0430\u0432\u043d\u043e \u0435\u0441\u0442\u044c Issue \u043d\u0430 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443, \u043d\u043e \u0436\u0434\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0451 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u044f\u0442, \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043d\u0435\u0442.<\/p>\n
    \u041a\u043e\u0434 Utils<\/b><\/p>\n
    \n
        \/**      * Utils functions      *\/     Utils.$inject = []     function Utils() {         var service = {             extend: extend         }          return service           \/**          * Extends the destination object `dst` by copying own enumerable properties          * from the `src` object(s) to `dst`. Undefined properties are not copyied.          * (modified angular version)          *          * @param {Object} dst Destination object.          * @param {...Object} src Source object(s).          * @return {Object} Reference to `dst`.          *\/         function extend(dst) {             var objs = [].slice.call(arguments, 1),                 h = dst.$$hashKey              for (var i = 0, ii = objs.length; i < ii; ++i) {                 var obj = objs[i]                 if (!angular.isObject(obj) && !angular.isFunction(obj)) continue                  var keys = Object.keys(obj)                 for (var j = 0, jj = keys.length; j < jj; j++) {                     var key = keys[j]                     var src = obj[key]                      if (!angular.isUndefined(src)) {                         dst[key] = src                     }                 }             }              if (h) {                 dst.$$hashKey = h             }             return dst         }     } <\/code><\/pre>\n
      \u041e\u043f\u044f\u0442\u044c function hoisting \u0432\u043e \u0432\u0441\u0435\u0439 \u043a\u0440\u0430\u0441\u0435.  <\/div>\n<\/div>\n
    \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430<\/h4>\n
    \u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b<\/b><\/p>\n
    \n
        \/**      * Smooth scroll directive.      *\/     stSmoothScroll.$inject = ['$document', '$rootScope', 'stScroller']     function stSmoothScroll($document, $rootScope, Scroller) {         \/\/ subscribe to user scroll events to cancel auto scrollingj         angular.forEach(['DOMMouseScroll', 'mousewheel', 'touchmove'], function(ev) {             $document.on(ev, function(ev) {                 $rootScope.$broadcast('stSmoothScroll.documentWheel', angular.element(ev.target))             })         })          var directive = {             restrict: 'A',             scope: {                 stScrollIf: '=',                 stScrollDuration: '=',                 stScrollOffset: '=',                 stScrollCancelOnBounds: '=',                 stScrollDelay: '=',                 stScrollAfter: '&'             },             link: link         }          return directive           \/**          * Smooth scroll directive link function          *\/         function link(scope, elem, attrs) {             var scroller = null              \/\/ stop scrolling if user scrolls the page himself             var offDocumentWheel = $rootScope.$on('stSmoothScroll.documentWheel', function() {                 if (!!scroller) {                     scroller.cancel()                 }             })              \/\/ unsubscribe             scope.$on('$destroy', function() {                 offDocumentWheel()             })               \/\/ init scrolling             if (attrs.stScrollIf === undefined) {                 \/\/ no trigger specified, start scrolling immediatelly                 run()             } else {                 \/\/ watch trigger and start scrolling, when it becomes `true`                 scope.$watch('stScrollIf', function(val) {                     if (!!val) run()                 })             }               \/**              * Start scrolling, add callback              *\/             function run() {                 scroller = new Scroller(elem[0], {                     duration: scope.stScrollDuration,                     offset: scope.stScrollOffset,                     easing: attrs.stScrollEasing,                     cancelOnBounds: scope.stScrollCancelOnBounds,                     delay: scope.stScrollDelay                 })                  scroller.run().then(function() {                     \/\/ call `after` callback                     if (typeof scope.stScrollAfter === 'function') scope.stScrollAfter()                      \/\/ forget scroller                     scroller = null                 })              }         }     } <\/code><\/pre>\n
      <\/div>\n<\/div>\n
    \u041e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435<\/h6>\n
      <\/p>\n
        \/**      * Smooth scroll directive.      *\/     stSmoothScroll.$inject = ['$document', '$rootScope', 'stScroller']     function stSmoothScroll($document, $rootScope, Scroller) {         ...     } <\/code><\/pre>\n
      <\/p>\n
      \n
    • \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0438\u0448\u0438\u0442\u0435 docstring \u043f\u0435\u0440\u0435\u0434 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438: \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u043e\u043c\u0438\u043c\u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0435\u0449\u0435 \u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0442\u044c \u0412\u0430\u0448 \u043a\u043e\u0434<\/li>\n
    • \u044f \u043b\u044e\u0431\u043b\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439 funcName.$inject = […]<\/i> \u0434\u043b\u044f \u044f\u0432\u043d\u043e\u0433\u043e \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439: \u044d\u0442\u043e \u043f\u0440\u0435\u0434\u043e\u0442\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0443\u0436\u0435 \u0442\u044b\u0441\u044f\u0447\u0443 \u0440\u0430\u0437 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0441 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439, \u043f\u043b\u044e\u0441 \u2014 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0434\u0440\u044f\u0435\u043c\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u0430\u043a \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2014 ‘stScroller’ -> Scroller<\/i><\/li>\n<\/ul>\n
      \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b<\/h6>\n
        <\/p>\n
          function stSmoothScroll(...) {         ...         var directive = {             restrict: 'A',             scope: {                 stScrollIf: '=',                 stScrollDuration: '=',                 stScrollOffset: '=',                 stScrollCancelOnBounds: '=',                 stScrollDelay: '=',                 stScrollAfter: '&'             },             link: link         }          return directive         ...     } <\/code><\/pre>\n
        <\/p>\n
        \n
      • \u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u043f\u043e\u043b\u044c\u0437\u0443\u044f\u0441\u044c function hoisting, \u0441\u0440\u0430\u0437\u0443 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442, \u0430 \u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c\u0441\u044f \u043f\u043e\u0437\u0436\u0435, \u0438 return<\/i> \u043d\u0430\u043c \u2014 \u043d\u0435 \u043f\u043e\u043c\u0435\u0445\u0430<\/li>\n
      • \u0432\u0441\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0438\u043c\u0435\u044e\u0442 \u043f\u0440\u0435\u0444\u0438\u043a\u0441 st-scroll<\/i>, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438<\/li>\n
      • \u0432 scope \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u2014 st-scroll-if<\/i> \u2014 \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u0438 \u043e\u0434\u0438\u043d \u043a\u043e\u043b\u043b\u0431\u044d\u043a<\/li>\n<\/ul>\n
        \u041e\u0442\u043c\u0435\u043d\u0430 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u0430\u043c \u00ab\u0432\u0437\u044f\u043b\u0441\u044f \u0437\u0430 \u0440\u0443\u043b\u044c\u00bb<\/h6>\n
            function stSmoothScroll(...) {         angular.forEach(['DOMMouseScroll', 'mousewheel', 'touchmove'], function(ev) {             $document.on(ev, function(ev) {                 $rootScope.$broadcast('stSmoothScroll.documentWheel', angular.element(ev.target))             })         })          var directive = {}         return directive         ....     } <\/code><\/pre>\n
          \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0432\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0435\u0432\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u0430\u043c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435<\/b>: \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0432 link<\/b>, \u0430 \u0432 \u0441\u0430\u043c\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u043e\u0434\u0438\u043d \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u0440\u0430\u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u043e\u043c $rootScope.$broadcast(…)<\/i>.<\/p>\n
        \u0424\u0443\u043d\u043a\u0446\u0438\u044f link<\/h6>\n
                    var offDocumentWheel = $rootScope.$on('stSmoothScroll.documentWheel', function() {                 if (!!scroller) {                     scroller.cancel()                 }             })              scope.$on('$destroy', function() {                 offDocumentWheel()             }) <\/code><\/pre>\n
          \u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0440\u0430\u0441\u0441\u044b\u043b\u0430\u0435\u043c\u043e\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u0430\u043c \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043a\u0440\u043e\u043b\u043b, \u0438 \u043d\u0435 \u0437\u0430\u044b\u0432\u0430\u0435\u043c \u043e\u0442\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u043d\u0435\u0433\u043e \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0443\u0448\u0435\u043d\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430.<\/p>\n
                    if (attrs.stScrollIf === undefined) {                 run()             } else {                 scope.$watch('stScrollIf', function(val) {                     if (!!val) run()                 })             } <\/code><\/pre>\n
          \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0442\u0440\u0438\u0433\u0433\u0435\u0440. \u0415\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u0437\u0430\u0434\u0430\u043d \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u0445, \u0442\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0441\u0440\u0430\u0437\u0443, \u0438\u043d\u0430\u0447\u0435 \u2014 \u0436\u0434\u0451\u043c, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d \u0441\u0442\u0430\u043d\u0435\u0442 true<\/i>. \u041e\u0431\u0440\u0430\u0449\u0430\u0435\u043c\u044f \u043a attrs<\/i>, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435. (\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043c\u044b \u0438\u0437\u0431\u0435\u0436\u0438\u043c \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044f typeof<\/i> \u0438 \u00abundefined\u00bb<\/i>, \u043d\u0435 \u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439)<\/p>\n
                    function run() {                 scroller = new Scroller(elem[0], {                     duration: scope.stScrollDuration,                     offset: scope.stScrollOffset,                     easing: attrs.stScrollEasing,                     cancelOnBounds: scope.stScrollCancelOnBounds,                     delay: scope.stScrollDelay                 })                  scroller.run().then(function() {                     if (typeof scope.stScrollAfter === 'function') scope.stScrollAfter()                      scroller = null                 })             } <\/code><\/pre>\n
          \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0443\u0441\u043a \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438. \u041f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u00ab\u043d\u0435 \u0433\u043b\u044f\u0434\u044f\u00bb \u0432\u0441\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0438\u0437 scope<\/i> \u0432 \u0441\u0435\u0440\u0432\u0438\u0441. \u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u043d\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u0445 \u043a\u043e\u043b\u043b\u0431\u044d\u043a (stScroller.run()<\/i> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 Promise) \u0438 \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e.<\/p>\n
          \u041f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430. \u0421\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0443 \u043d\u0430\u0441 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438. \u0415\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435!<\/p>\n
        \u0421\u0435\u0440\u0432\u0438\u0441<\/h4>\n
        \u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441\u0435\u0440\u0432\u0438\u0441\u0430<\/b><\/p>\n
        \n
            \/**      * Smooth scrolling manager      *\/     stScroller.$inject = ['$window', '$document', '$timeout', '$q', 'Utils']     function stScroller($window, $document, $timeout, $q, Utils) {         var body = $document.find('body')[0]          \/**          * Smooth scrolling manager constructor          * @param {DOM Element} elem Element which window must be scrolled to          * @param {Object} opts Scroller options          *\/         function Scroller(elem, opts) {             this.opts = Utils.extend({                 duration: 500,                 offset: 100,                 easing: 'easeInOutCubic',                 cancelOnBounds: true,                 delay: 0             }, opts)              this.elem = elem             this.startTime = null             this.framesCount = 0             this.frameRequest = null             this.startElemOffset = elem.getBoundingClientRect().top             this.endElemOffset = this.opts.offset             this.isUpDirection = this.startElemOffset > this.endElemOffset             this.curElemOffset = null             this.curWindowOffset = null              this.donePromise = $q.defer()  \/\/ this promise is resolved when scrolling is done         }          Scroller.prototype = {             run: run,             done: done,             animationFrame: animationFrame,             requestNextFrame: requestNextFrame,             cancel: cancel,             isElemReached: isElemReached,             isWindowBoundReached: isWindowBoundReached,             getEasingRatio: getEasingRatio         }          return Scroller           \/**          * Run smooth scroll          * @return {Promise} A promise which is resolved when scrolling is done          *\/         function run() {             $timeout(angular.bind(this, this.requestNextFrame), +this.opts.delay)             return this.donePromise.promise         }           \/**          * Add scrolling done callback          * @param {Function} cb          *\/         function done(cb) {             if (typeof cb !== 'function') return             this.donePromise.promise.then(cb)         }           \/**          * Scrolling animation frame.          * Calculate new element and window offsets, scroll window,          * request next animation frame, check cancel conditions          * @param {DOMHighResTimeStamp or Unix timestamp} time          *\/         function animationFrame(time) {             this.requestNextFrame()              \/\/ set startTime             if (this.framesCount++ === 0) {                 this.startTime = time                 this.curElemOffset = this.elem.getBoundingClientRect().top                 this.curWindowOffset = $window.pageYOffset             }              var timeLapsed = time - this.startTime,                 perc = timeLapsed \/ this.opts.duration,                 newOffset = this.startElemOffset                     + (this.endElemOffset - this.startElemOffset)                     * this.getEasingRatio(perc)              this.curWindowOffset += this.curElemOffset - newOffset             this.curElemOffset = newOffset              $window.scrollTo(0, this.curWindowOffset)              if (timeLapsed >= this.opts.duration                     || this.isElemReached()                     || this.isWindowBoundReached()) {                 this.cancel()             }         }           \/**          * Request next animation frame for scrolling          *\/         function requestNextFrame() {             this.frameRequest = $window.requestAnimationFrame(                 angular.bind(this, this.animationFrame))         }           \/**          * Cancel next animation frame, resolve done promise          *\/         function cancel() {             cancelAnimationFrame(this.frameRequest)             this.donePromise.resolve()         }           \/**          * Check if element is reached already          * @return {Boolean}          *\/         function isElemReached() {             if (this.curElemOffset === null) return false              return this.isUpDirection ? this.curElemOffset <= this.endElemOffset                 : this.curElemOffset >= this.endElemOffset         }           \/**          * Check if window bound is reached          * @return {Boolean}          *\/         function isWindowBoundReached() {             if (!this.opts.cancelOnBounds) {                 return false             }             return this.isUpDirection ?  body.scrollHeight <= this.curWindowOffset + $window.innerHeight                 : this.curWindowOffset <= 0         }           \/**          * Return the easing ratio          * @param {Number} perc Animation done percentage          * @return {Float} Calculated easing ratio          *\/         function getEasingRatio(perc) {             switch(this.opts.easing) {                 case 'easeInQuad': return perc * perc; \/\/ accelerating from zero velocity                 case 'easeOutQuad': return perc * (2 - perc); \/\/ decelerating to zero velocity                 case 'easeInOutQuad': return perc < 0.5 ? 2 * perc * perc : -1 + (4 - 2 * perc) * perc; \/\/ acceleration until halfway, then deceleration                 case 'easeInCubic': return perc * perc * perc; \/\/ accelerating from zero velocity                 case 'easeOutCubic': return (--perc) * perc * perc + 1; \/\/ decelerating to zero velocity                 case 'easeInOutCubic': return perc < 0.5 ? 4 * perc * perc * perc : (perc - 1) * (2 * perc - 2) * (2 * perc - 2) + 1; \/\/ acceleration until halfway, then deceleration                 case 'easeInQuart': return perc * perc * perc * perc; \/\/ accelerating from zero velocity                 case 'easeOutQuart': return 1 - (--perc) * perc * perc * perc; \/\/ decelerating to zero velocity                 case 'easeInOutQuart': return perc < 0.5 ? 8 * perc * perc * perc * perc : 1 - 8 * (--perc) * perc * perc * perc; \/\/ acceleration until halfway, then deceleration                 case 'easeInQuint': return perc * perc * perc * perc * perc; \/\/ accelerating from zero velocity                 case 'easeOutQuint': return 1 + (--perc) * perc * perc * perc * perc; \/\/ decelerating to zero velocity                 case 'easeInOutQuint': return perc < 0.5 ? 16 * perc * perc * perc * perc * perc : 1 + 16 * (--perc) * perc * perc * perc * perc; \/\/ acceleration until halfway, then deceleration                 default: return perc;             }         }     } <\/code><\/pre>\n
          <\/div>\n<\/div>\n
          \u0421\u0435\u0440\u0432\u0438\u0441 \u0431\u044b\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u043e \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 \u00ab\u043a\u043b\u0430\u0441\u0441\u0430\u00bb (\u043d\u0435 \u0431\u0435\u0439\u0442\u0435 \u043c\u0435\u043d\u044f, \u044f \u0432\u0441\u0451 \u043f\u043e\u043d\u0438\u043c\u0430\u044e). \u0412 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0435 \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043d\u0443\u0436\u043d\u044b\u0445 \u0434\u043b\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438. \u041e\u0441\u043e\u0431\u043e\u0433\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0441\u0442\u043e\u0438\u0442 \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043e\u043f\u0446\u0438\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438:  <\/p>\n
                    this.opts = Utils.extend({                 duration: 500,                 offset: 100,                 easing: 'easeInOutCubic',                 cancelOnBounds: true,                 delay: 0             }, opts) <\/code><\/pre>\n
          \u0418\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0432\u044b\u0448\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f extend \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u0430\u0434\u0430\u0442\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u0442\u0451\u0440\u0442\u044b, \u0435\u0441\u043b\u0438 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0435 \u0431\u044b\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043e\u043f\u0446\u0438\u0438.<\/p>\n
        \u0417\u0430\u0434\u0430\u043d\u0438\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439<\/b><\/p>\n
        \n
                    this.elem = elem             this.startTime = null             this.framesCount = 0             this.frameRequest = null             this.startElemOffset = elem.getBoundingClientRect().top             this.endElemOffset = this.opts.offset             this.isUpDirection = this.startElemOffset > this.endElemOffset             this.curElemOffset = null             this.curWindowOffset = null              this.donePromise = $q.defer()  \/\/ \u0443 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u043c\u0438\u0441\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d resolve, \u043a\u043e\u0433\u0434\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0441\u044f <\/code><\/pre>\n
          <\/div>\n<\/div>\n
        \u041c\u0435\u0442\u043e\u0434\u044b<\/h6>\n
                Scroller.prototype = {             run: run,                                     \/\/ \u0437\u0430\u043f\u0443\u0441\u043a \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438             done: done,                                   \/\/ \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u043b\u0431\u044d\u043a\u0430             animationFrame: animationFrame,               \/\/ \u043e\u0434\u0438\u043d \u0444\u0440\u0435\u0439\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438             requestNextFrame: requestNextFrame,           \/\/ \u0437\u0430\u043f\u0440\u043e\u0441 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430             cancel: cancel,                               \/\/ \u043e\u0442\u043c\u0435\u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430             isElemReached: isElemReached,                 \/\/ \u0434\u043e\u0441\u0442\u0438\u0433\u043b\u0430 \u043b\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u0446\u0435\u043b\u0438             isWindowBoundReached: isWindowBoundReached,   \/\/ \u0443\u043f\u0451\u0440\u043b\u0430\u0441\u044c \u043b\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430 \u0432 \u043a\u0440\u0430\u0439 \u044d\u043a\u0440\u0430\u043d\u0430             getEasingRatio: getEasingRatio                \/\/ \u043c\u0435\u0442\u043e\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 easing-\u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442         } <\/code><\/pre>\n
          \u041f\u043e\u0432\u0442\u043e\u0440\u044e\u0441\u044c: function hoisting \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0435\u0441\u044c \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f. \u0427\u0435\u043b\u043e\u0432\u0435\u043a, \u0447\u0438\u0442\u0430\u044e\u0449\u0438\u0439 \u043a\u043e\u0434, \u043c\u043e\u0436\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0441\u0435\u0431\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u043d\u0435 \u043b\u0438\u0441\u0442\u0430\u044f \u0432\u0435\u0441\u044c \u0432 \u043f\u043e\u0438\u0441\u043a\u0430\u0445 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0439.<\/p>\n
          \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n
          \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0451 \u0441 \u043c\u0435\u0442\u043e\u0434\u0430 run<\/i>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0432\u044b\u0439 \u0444\u0440\u0435\u0439\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u0438 \u0437\u0430\u043e\u0434\u043d\u043e \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u0430\u044f \u0432 \u043e\u043f\u0446\u0438\u044f\u0445:  <\/p>\n
                function run() {             $timeout(angular.bind(this, this.requestNextFrame), +this.opts.delay)             return this.donePromise.promise         }         ....         function requestNextFrame() {             this.frameRequest = $window.requestAnimationFrame(                 angular.bind(this, this.animationFrame))         }         function cancel() {             cancelAnimationFrame(this.frameRequest)             this.donePromise.resolve()         } <\/code><\/pre>\n
          \u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0440\u043e\u043c\u0438\u0441, \u0447\u0442\u043e\u0431\u044b \u0443 \u00ab\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u00bb \u0431\u044b\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044f \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0444\u043e\u043a\u0443\u0441\u0430 \u0432 \u0438\u043d\u043f\u0443\u0442 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0434\u0451\u0440\u0433\u0430\u043d\u0438\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443 \u0441\u043a\u0440\u043e\u043b\u043b\u044f\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u0438 \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u0438 \u0444\u043e\u043a\u0443\u0441\u0430 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u044d\u043a\u0440\u0430\u043d\u0430).<\/p>\n
          \u041c\u0435\u0442\u043e\u0434 requestNextFrame<\/i> \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 \u0444\u0440\u0435\u0439\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0435\u0433\u043e \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0435\u0433\u043e \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u043c\u0435\u0442\u043e\u0434\u0435 cancel<\/i>.<\/p>\n
          \u041c\u0435\u0442\u043e\u0434 cancel<\/i>, \u043f\u043e\u043c\u0438\u043c\u043e \u043e\u0442\u043c\u0435\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0430, \u0440\u0435\u0437\u043e\u043b\u0432\u0438\u0442 \u043a\u043e\u043b\u043b\u0431\u044d\u043a.<\/p>\n
          \u041d\u0430\u0441\u0442\u0430\u043b\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043a \u0442\u043e\u043c\u0443 \u043c\u0435\u0441\u0442\u0443, \u0433\u0434\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u0441\u044f \u043c\u0430\u0433\u0438\u044f \u043f\u043b\u0430\u0432\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u2014 \u043c\u0435\u0442\u043e\u0434 animationFrame<\/i>:<\/p>\n
        \u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u043c\u0435\u0442\u043e\u0434\u0430<\/b><\/p>\n
        \n
                function animationFrame(time) {             this.requestNextFrame()              \/\/ set startTime             if (this.framesCount++ === 0) {                 this.startTime = time                 this.curElemOffset = this.elem.getBoundingClientRect().top                 this.curWindowOffset = $window.pageYOffset             }              var timeLapsed = time - this.startTime,                 perc = timeLapsed \/ this.opts.duration,                 newOffset = this.startElemOffset                     + (this.endElemOffset - this.startElemOffset)                     * this.getEasingRatio(perc)              this.curWindowOffset += this.curElemOffset - newOffset             this.curElemOffset = newOffset              $window.scrollTo(0, this.curWindowOffset)              if (timeLapsed >= this.opts.duration                     || this.isElemReached()                     || this.isWindowBoundReached()) {                 this.cancel()             }         } <\/code><\/pre>\n
          <\/div>\n<\/div>\n
          \u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 \u0432\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f requestNextFrame<\/i>, \u0447\u0442\u043e\u0431\u044b \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u043d\u044c\u0448\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0440\u0435\u0439\u043c \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0410 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u0434\u0432\u0435 \u0445\u0438\u0442\u0440\u043e\u0441\u0442\u0438:<\/p>\n
                    if (this.framesCount++ === 0) {                 this.startTime = time                 this.curElemOffset = this.elem.getBoundingClientRect().top                 this.curWindowOffset = $window.pageYOffset             } <\/code><\/pre>\n
          <\/p>\n