Angular ui-router scroll to top, not to ui-view
Solution 1:
Another approach is to decorate the default $uiViewScroll
service, effectively overriding the default behaviour.
app.config(function ($provide) {
$provide.decorator('$uiViewScroll', function ($delegate) {
return function (uiViewElement) {
// var top = uiViewElement.getBoundingClientRect().top;
// window.scrollTo(0, (top - 30));
// Or some other custom behaviour...
};
});
});
And as Hubrus mentioned, for any <ui-view>
you do not wish this to apply for, simply add autoscroll="false"
. I haven't taken a good look into the actual scrolling implementation, I just figured I'd mention the decorator way (it's alot of fun) as an alternative. I'm sure you can work out the exact scrolling behaviour.
Solution 2:
when ever the path changes the router broadcasts an event: $stateChangeSuccess i.e. the url has changed so just listen to it and use jquery to scroll to the top of the page
$rootScope.$on('$stateChangeSuccess',function(){
$("html, body").animate({ scrollTop: 0 }, 200);
})
place the above code inside
yourAppName.run(function(){
//the above code here
})
Solution 3:
So I had this same problem. I have a fixed-top nav bar. If I put autoscroll="true" in the ui-view it would scroll to the top minus the height of the height of the scroll bar.
So I got rid of the style that added the padding to the body for the top navbar
// fixed navigation at top
//body { padding-top: 100px; }
And applied it to the ui-view
[ui-view=main] {
padding-top: 100px;
}
Now autoscroll="true" works as expected.
Solution 4:
1) I think the easiest way it to put autoscroll="false"
on the ui-view and manipulate the scrolling in the $viewContentLoaded
event.
2) This is the browser's default behavior on anchors
Solution 5:
Since $stateChangeSuccess
seems not to be available anymore in current AngularJS (as 1.2.x) I changed
Rishul Mattas example to the following which works fine for me:
app.run(function ($rootScope) {
$rootScope.$on('$viewContentLoaded',function(){
jQuery('html, body').animate({ scrollTop: 0 }, 200);
});
});