title: How to reset scroll position on a route change?
body: <p>I spend my first couple of hours with Angular JS and I am trying to write a SPA with it. However, on changing route, the scroll position remains at its current position after changing routes. This means that if someone read through half of the text on page two, this person will end up in the middle of page when two after changing to the second page. (Given that the pages are equally long.)</p>
  
  <p>When I look for solutions I only find people asking for the opposite, i.e. they do not want to change the scrolling position once they change pages. However, I failed to reproduce even that. I wonder if the development of Angular JS got ahead of this and the sources I consulted were outdated.</p>
  
  <p>I created a minimal version that demonstrates my problem (simply add two files <code>sample1.html</code> and <code>sample2.html</code> with random content to make it work.):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;&lt;title&gt;SPA sample&lt;/title&gt;&lt;/head&gt;
  &lt;body data-ng-app="myApp"&gt;
  &lt;div style="position: fixed;"&gt;
    &lt;a href="#/"&gt;Main&lt;/a&gt;
    &lt;a href="#/other"&gt;Tutorial&lt;/a&gt;
  &lt;/div&gt;
  &lt;div data-ng-view=""&gt;&lt;/div&gt;
  &lt;script src="http://code.angularjs.org/1.2.9/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.angularjs.org/1.2.9/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var myApp = angular.module('myApp', ['ngRoute']);
      myApp.config(function ($routeProvider) {
          $routeProvider
                  .when('/', {
                      controller: 'noOp',
                      templateUrl: 'sample1.html'
                  })
                  .when('/other', {
                      controller: 'noOp',
                      templateUrl: 'sample2.html'
                  })
                  .otherwise({redirectTo: '/'});
      });
      myApp.controller('noOp', function ($scope) { });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>