CODEWITHSUNDEEP
javascriptangularjs
Thomas
Thomas

Reputation: 75

Angular: disable scroll to top when changing view

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?

Upvotes: 7

Views: 4497

Answers (1)

joakimbl
joakimbl

Reputation: 18081

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);

Upvotes: 6

Related Questions