I have implemented a controller that automatically scrolls the window to the top whenever a state change is initiated:
$rootScope.$on('$stateChangeStart',function(){
window.scrollTo(0, 0);
});
However, I am facing an issue where certain states trigger the $stateChangeStart and also scroll to the top. I would like to prevent this behavior on those specific views/states.
Here are the routes defined in my application:
'use strict'
angular.module('myApp')
.config(function($stateProvider) {
$stateProvider
.state('everywhere', {
url: '/everywhere',
templateUrl: 'client/everywhere/everywhere.view.ng.html',
controller: 'everywhereCtrl'
})
.state('everywhere.instructions', {
url: '/instructions',
templateUrl: 'client/everywhere/instructions/instructions.view.ng.html',
controller: 'everywhereCtrl'
})
.state('everywhere.instructions', {
url: '/others',
templateUrl: 'client/everywhere/others/others.view.ng.html',
controller: 'everywhereCtrl'
});
});
and here is the view structure:
<div class="container-fluid" id="view" name="view">
<div class="col-md-12 text-center margin-bottom margin-top">
<ul class="nav nav-pills center-pills">
<li class="everywhere" ui-sref-active="active"><a ui-sref="everywhere.instructions">Instructions</a></li>
<li class="everywhere" ui-sref-active="active"><a ui-sref="everywhere.others">Others</a></li>
</ul>
</div>
</div>
<div ui-view root-state="everywhere"></div>
Can anyone guide me on how to disable the auto-scroll to top feature on specific states? Your help will be greatly appreciated.
Thank you!