更改路线不滚动在新的页面顶部 [英] Changing route doesn't scroll to top in the new page

问题描述

我已经发现了一些意外，至少对我来说，行为，当路由变化。
在本教程的步骤11 <一个href=\"http://angular.github.io/angular-phonecat/step-11/app/#/phones\">http://angular.github.io/angular-phonecat/step-11/app/#/phones
可以看到的手机的列表。如果您滚动至底部，并点击的最新一期，可以看到滚动不在顶部，反而是一种在中间。

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?

推荐答案

的问题是，您的 ngView 在加载一个新的视图保留滚动位置。您可以指示 $ anchorScroll 滚动视口的视图更新完毕后（即的文档都有点含糊，但在这里滚动用于滚动到新视图的顶部）。

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).

解决方案是添加自动滚屏=真正的您ngView元素：

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

<div class="ng-view" autoscroll="true"></div>

这篇关于更改路线不滚动在新的页面顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！