title: Wait until scrollTo is complete before running a command
body: <p>I've got an AngularJS app, and I have a smooth scrolling directive to force the page to scroll to the bottom. I want the command to only run after the scrolling has finished. You can see that at the moment I run the scrolling function and then I run <code>$('#comment-input').focus();</code> to focus on an element. I want to change it so this is only ran <em>after</em> the scrolling. I know I need to implement a <code>callback</code> but I can't figure out where to implement it.</p>
  
  <pre><code>(function() {
  
      var app = angular.module('myApp');
  
      app.service('anchorSmoothScroll', function(){
  
          this.scrollTo = function(eID) {
  
              // This scrolling function 
              // is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript
  
              var startY = currentYPosition();
              var stopY = elmYPosition(eID);
              var distance = stopY &gt; startY ? stopY - startY : startY - stopY;
              if (distance &lt; 100) {
                  scrollTo(0, stopY); return;
              }
              var speed = Math.round(distance / 100);
              if (speed &gt;= 20) speed = 20;
              var step = Math.round(distance / 25);
              var leapY = stopY &gt; startY ? startY + step : startY - step;
              var timer = 0;
              if (stopY &gt; startY) {
                  for ( var i=startY; i&lt;stopY; i+=step ) {
                      setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
                      leapY += step; if (leapY &gt; stopY) leapY = stopY; timer++;
                  } return;
              }
              for ( var i=startY; i&gt;stopY; i-=step ) {
                  setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
                  leapY -= step; if (leapY &lt; stopY) leapY = stopY; timer++;
              }
  
              function currentYPosition() {
                  // Firefox, Chrome, Opera, Safari
                  if (self.pageYOffset) return self.pageYOffset;
                  // Internet Explorer 6 - standards mode
                  if (document.documentElement &amp;&amp; document.documentElement.scrollTop)
                      return document.documentElement.scrollTop;
                  // Internet Explorer 6, 7 and 8
                  if (document.body.scrollTop) return document.body.scrollTop;
                  return 0;
              }
  
              function elmYPosition(eID) {
                  var elm = document.getElementById(eID);
                  var y = elm.offsetTop;
                  var node = elm;
                  while (node.offsetParent &amp;&amp; node.offsetParent != document.body) {
                      node = node.offsetParent;
                      y += node.offsetTop;
                  } return y;
              }
  
          };
  
      });
  
      app.controller('TextareaController', ['$scope','$location', 'anchorSmoothScroll',
      function($scope, $location, anchorSmoothScroll) {
  
          $scope.gotoElement = function (eID){
            // set the location.hash to the id of
            // the element you wish to scroll to.
            $location.hash('bottom-div');
  
            // call $anchorScroll()
            anchorSmoothScroll.scrollTo(eID);
  
            $('#comment-input').focus();
  
          };
  
      }]);
  
  }());
  </code></pre>