Angular: disable scroll to top when changing view

Question

Say I have a large header so that the ng-view directive is down on the page. just before this ng-view I have a kind of menu who trigger angular routing and so change the view. My problem is that anytime the routing is trigged the page keep scroll to top so the partial is out of the viewport.

here is my routing:

angular.module('portfolio', [])
  .config(function ($routeProvider, $anchorScrollProvider) {
    $anchorScrollProvider.disableAutoScrolling();
    $routeProvider
      .when('', {
        templateUrl: 'portfolio/index.html',
        controller: 'PortfolioListCtrl'
      })
      .when('/portfolio/:project', {
        templateUrl: 'portfolio/detail.html',
        controller: 'PortfolioDetailCtrl'
      })
      .otherwise({redirectTo: ''});
  });

I have $anchorScrollProvider.disableAutoScrolling(); put it doesn't seems to work.

Anyone have an idea?

Answer 1

The docs are a bit confusing on this one, I remember having the same problem. Apparently ng-view uses the $anchorScroll service, so you can disable it by simply overwriting it in your module:

angular.module('portfolio').value('$anchorScroll', angular.noop);