title: AngularJS Scroll to element prevent browser from jumping
body: <p>I've written an app that has a list of blocks.</p>
  <p>Each block contains links to other blocks.
  When a link to a block is clicked e.g #/home/page-19, the page animates down/up depending on current position.</p>
  <p>This all currently works but when the anchor is clicked and the route updates, the browser jumps to the top and then animates down, I need it to animate from its current position.</p>
  <p>I've written a directive that adds preventDefault to all anchors.</p>
  <p>See JS fiddle below.
  <a href="http://jsfiddle.net/ygNWF/10/" rel="nofollow noreferrer">http://jsfiddle.net/ygNWF/10/</a></p>
  <p>Stripped down code:</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js&quot;&gt;&lt;/script&gt;
  
  &lt;body ng-app=&quot;app&quot; ng-controller=&quot;appController&quot;&gt;
      &lt;script type=&quot;text/ng-template&quot; id=&quot;home-template&quot;&gt;
         &lt;div class=&quot;page&quot; id=&quot;page-17&quot; &gt;
                &lt;div class=&quot;page-inner&quot; ng-style=&quot;style()&quot; resize&gt;&lt;a href=&quot;#/home/page-18&quot;&gt;Page 18&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page&quot; id=&quot;page-18&quot;&gt;
                &lt;div class=&quot;page-inner&quot; ng-style=&quot;style()&quot; resize&gt;&lt;a href=&quot;#/home/page-19&quot;&gt;Page 19&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page&quot; id=&quot;page-19&quot;&gt;
                &lt;div class=&quot;page-inner&quot; ng-style=&quot;style()&quot; resize&gt;&lt;a href=&quot;#/home/page-20&quot;&gt;Page 20&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;page&quot; id=&quot;page-20&quot;&gt;
                &lt;div class=&quot;page-inner&quot; ng-style=&quot;style()&quot; resize&gt;&lt;a href=&quot;#/home/page-17&quot;&gt;Page 17&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
      &lt;/script&gt;
  
      &lt;div class=&quot;wrapper&quot;&gt;
        &lt;div class=&quot;view&quot; ng-view scroll&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p><strong>javascript:</strong></p>
  <pre><code>var app = angular.module('app', []);
  
  /*
    Controllers
  */
  app.controller( 'appController', function( $scope ) {
  
  });
  app.controller( 'routeController', function( $scope, $routeParams ) {
    //When route change, check if page has been updated and run animateScroll directive
    if(typeof $routeParams !== 'undefined' &amp;&amp; $routeParams.page.length &gt; 0){
      $scope.animateScroll($routeParams.page);
    }
  });
  
  /*
    Page routes
  */
  app.config(['$routeProvider',
    function($routeProvider) {
      $routeProvider.
        when('/home/:page', {
          templateUrl: 'home-template',
          controller: 'routeController'
        })
  
        .otherwise({
          redirectTo: '/home/'
        });
  }]);
  
  /*
    Directives
  */
  app.directive('scroll', function ($routeParams, $timeout) {
    /* 
    Scroll to element ID
    */
    return {
      restrict: 'A',
      link: function(scope, elm, attrs) {
        scope.animateScroll = function(page) {
          $timeout(function(){
            console.log('test');
            if(jQuery('#' + page).length == 1){
              jQuery('html, body').animate({
                scrollTop:  jQuery('#' + page).position().top
              }); 
            };
          }, 1);
        };
      }
    };
  });
  
  app.directive('resize', function ($window) {
    return function (scope, element) {
      var w = angular.element($window);
  
      scope.getWindowDimensions = function () {
        return { height: w.height() };
      };
  
      scope.$watch(scope.getWindowDimensions, function (dimensions) {
          scope.windowHeight = dimensions.height;
          scope.style = function () {
            return { 
                'min-height': scope.windowHeight + 'px'
            };
          };
      }, true);
  
      w.bind('resize', function () {
        scope.$apply();
      });
    }
  });
  
  app.directive('a', function() {
    return {
      restrict: 'E',
      link: function(scope, elem, attrs) {
        elem.on('click', function(e){
          e.preventDefault();
        });
      }
    };
  });
  </code></pre>
  <p><strong>Page layout example:</strong></p>
  <p><img src="https://i.stack.imgur.com/V4TbD.jpg" alt="enter image description here" /></p>