Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Autoscroll to TOP with ui-router and Angularjs

I've read so many different problems with this and none of the solution given seem to fit my use case. I started by simply putting target="_top" on all my links, but that actually forces my app to reload which wont work. I've also seen people say they use autoscroll="true" but that only seems to work if its within my ui-view.

The issue with this is that in my index.html file I have fixed nav and other static elements that are above my first ui-view. This means when I go to other pages I lose the navigation as the page loads past those elements. I've also tried putting this on the body with:

<body autoscroll="true"> </body> 

This doesn't seem to do anything either. So the question is, how can I make sure that new pages (new route changes from ui-router) result in starting at the top of the page? THANKS!

like image 544
Mr. BigglesWorth Avatar asked Oct 18 '14 20:10

Mr. BigglesWorth


1 Answers

If you want it to always scroll to 0 cross-browser, do nothing with autoscroll. Just place this your run block:

$rootScope.$on('$stateChangeSuccess', function() {    document.body.scrollTop = document.documentElement.scrollTop = 0; }); 
like image 66
TaylorMac Avatar answered Sep 22 '22 17:09

TaylorMac