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?

joakimbl · Accepted Answer · 2013-05-29 19:51:11Z

6

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

answered May 29, 2013 at 19:51

joakimbl

18.1k5 gold badges57 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anastasios Andronidis Over a year ago

I dont like this solution. Overriding a whole service is a bad idea :/

Lucio Over a year ago

Any other solution @ΑναστάσηςΑνδρονίδης?

Collectives™ on Stack Overflow

Angular: disable scroll to top when changing view

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related