我发现了一些不受欢迎的行为,至少对我来说,当路线改变时。 在本教程的第11步http://angular.github.io/angular-phonecat/step-11/app/#/phones 你可以看到电话列表。如果你滚动到底部,点击最新的一个,你可以看到滚动不是在顶部,而是在中间。
我在我的一个应用程序中也发现了这个,我想知道如何让它滚动到顶部。我可以手动来做,但我认为应该有其他优雅的方法来做这个,我不知道。
那么,当路线改变时,是否有一种优雅的方式可以滚动到顶部?
我发现了一些不受欢迎的行为,至少对我来说,当路线改变时。 在本教程的第11步http://angular.github.io/angular-phonecat/step-11/app/#/phones 你可以看到电话列表。如果你滚动到底部,点击最新的一个,你可以看到滚动不是在顶部,而是在中间。
我在我的一个应用程序中也发现了这个,我想知道如何让它滚动到顶部。我可以手动来做,但我认为应该有其他优雅的方法来做这个,我不知道。
那么,当路线改变时,是否有一种优雅的方式可以滚动到顶部?
当前回答
以下是我的(看似)健壮、完整且(相当)简洁的解决方案。它使用了最小化兼容样式(以及对模块的angular.module(NAME)访问)。
angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
$rootScope.$on("$locationChangeSuccess", function() {
$anchorScroll();
});
}]);
PS我发现自动滚动的东西没有影响,无论是设置为真或假。
其他回答
使用angularjs的UI路由器,我所做的是:
.state('myState', {
url: '/myState',
templateUrl: 'app/views/myState.html',
onEnter: scrollContent
})
:
var scrollContent = function() {
// Your favorite scroll method here
};
它在任何页面上都不会失败,而且它不是全局的。
试试这个http://ionicframework.com/docs/api/service/$ionicScrollDelegate/
它会滚动到列表的顶部
简单解决方案:在主路模块中添加scrollPositionRestoration功能。 是这样的:
const routes: Routes = [
{
path: 'registration',
loadChildren: () => RegistrationModule
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
这段代码对我来说很有用。我希望它也会为你工作。 你所要做的就是注入$anchorScroll到你的运行块,并将监听器函数应用到rootScope,就像我在下面的例子中所做的那样。
angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
$rootScope.$on("$locationChangeSuccess", function(){
$anchorScroll();
});
下面是Angularjs模块的调用顺序:
app.config () app.run () 指令的编译函数(如果它们在dom中找到) app.controller () 指令的链接函数(如果找到的话)
RUN BLOCK在注入器创建后执行,用于启动应用程序。这意味着当你重定向到新的路由视图时,运行块中的侦听器调用
$ anchorScroll ()
你现在可以看到滚动开始顶部与新的路由视图:)
没有一个答案能解决我的问题。我在视图之间使用动画,滚动总是在动画之后发生。我发现的解决方案是,在动画之前滚动到顶部是以下指令:
yourModule.directive('scrollToTopBeforeAnimation', ['$animate', function ($animate) {
return {
restrict: 'A',
link: function ($scope, element) {
$animate.on('enter', element, function (element, phase) {
if (phase === 'start') {
window.scrollTo(0, 0);
}
})
}
};
}]);
我把它插入我的视图,如下所示:
<div scroll-to-top-before-animation>
<div ng-view class="view-animation"></div>
</div>