更改路线不会滚动到新页面的顶部

本文介绍了更改路线不会滚动到新页面的顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我发现了一些不受欢迎的行为，至少对我来说，当路线改变时.在教程的第 11 步 http://angular.github.io/angular-phonecat/step-11/app/#/phones您可以看到电话列表.如果您滚动到底部并点击最新的一个，您会看到滚动条不在顶部，而是在中间.

我也在我的一个应用程序中发现了这个，我想知道如何让它滚动到顶部.我可以手动完成，但我认为应该有其他优雅的方式来做到这一点，我不知道.

那么，有没有一种优雅的方式在路线改变时滚动到顶部?

解决方案

问题在于您的 ngView 在加载新视图时保留了滚动位置.您可以指示 $anchorScroll 在视图更新后滚动视口"(docs 有点含糊，但在此处滚动意味着滚动到新视图的顶部).

解决方案是将 autoscroll="true" 添加到您的 ngView 元素:

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?

解决方案

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>

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