AngularJS. How to disable auto-scroll to top of my page

Question

Tell me please, how can I disable auto-upto top of my page? If I use hash nav:

<a href="#/index">Goto index</a>

my page doest up to top, but if I use AngularJS: Html:

<a ng-href="#/index">Goto index</a>

JS:

$routeProvider.
      when('/index', {
          template:'...',
          controller: 'RouteCtrl'
      })

my page scrolled to top. How can I disable it?

Answer 1

I find it a bit strange that your plain href doesn't scroll and ng-href scrolls, I thought it was the other way round...

But, to the solution; It's up to the browser to scroll on hash changes, so usually to disable it you need to intercept and preventDefault() the event and then change the location by yourself. When using Angular, you can either define some attribute directive for the <a> element or just define your own a directive.

If you use ng-view, it relies on $anchorScroll service with view updates to simulate the behaviour what the browser would normally do, as Angular already intercepts the event. You can prevent the scroll on view load by providing your own $anchorScroll which does nothing:

angular.module('yourModule', []).value('$anchorScroll', angular.noop);

Answer 2

As indicated in the AngularJS documentation, the proper way to do this is:

angular.module('yourModule',[]).config( ['$anchorScrollProvider', 
    function($anchorScrollProvider) {
        $anchorScrollProvider.disableAutoScrolling();
    }]
);

Answer 3

just try

assessmentApp.run(['$anchorScroll', function($anchorScroll) {
    $anchorScroll = angular.noop;
}])