Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing route doesn't scroll to top in the new page

I've found some undesired, at least for me, behaviour when the route changes. In the step 11 of the tutorial http://angular.github.io/angular-phonecat/step-11/app/#/phones you can see the list of phones. If you scroll to the bottom and click on one of the latest, you can see that the scroll isn't at top, instead is kind of in the middle.

I've found this in one of my apps too and I was wondering how can I get this to scroll to the top. I can do it mannually, but I think that there should be other elegant way to do this which I don't know.

So, is there an elegant way to scroll to the top when the route changes?

like image 475
Matias Gonzalez Avatar asked Jan 10 '14 22:01

Matias Gonzalez


People also ask

How do I scroll to top on page change in react?

Use the window. scrollTo() method to scroll to the top of the page in React, e.g. window. scrollTo(0, 0) .

How do I move to the top of the page in HTML?

window. scrollTo(0, 0); …is a sure bet to scroll the window (or any other element) back to the top.


1 Answers

The problem is that your ngView retains the scroll position when it loads a new view. You can instruct $anchorScroll to "scroll the viewport after the view is updated" (the docs are a bit vague, but scrolling here means scrolling to the top of the new view).

The solution is to add autoscroll="true" to your ngView element:

<div class="ng-view" autoscroll="true"></div> 
like image 148
Konrad Kiss Avatar answered Oct 17 '22 22:10

Konrad Kiss