更改视图后,angularJS不会滚动到顶部

Question

例如:

用户向下滚动视图A;

然后用户点击链接,用户可以查看B;

视图是更改,但用户的垂直位置保持不变,并且必须手动滚动到屏幕顶部.

这是一个有角度的虫子吗？

我写了一个小的解决方法,使用jquery滚动到顶部; 但是我找不到将它绑定到的正确事件.

看到评论后编辑:

如何以及何时将自己拉到顶峰？我正在使用jquery,但是$ viewContentLoaded事件太快了(该方法运行,但页面当时不滚动)

Answer 1

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

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

https://docs.angularjs.org/api/ngRoute/directive/ngView

Answer 2

加载新视图时,Angular不会自动滚动到顶部,它只保留当前滚动位置.

这是我使用的解决方法:

myApp.run(function($rootScope, $window) {

  $rootScope.$on('$routeChangeSuccess', function () {

    var interval = setInterval(function(){
      if (document.readyState == 'complete') {
        $window.scrollTo(0, 0);
        clearInterval(interval);
      }
    }, 200);

  });
});

把它放在你的引导程序中(通常称为app.js).

这是一个纯粹的JavaScript解决方案(如果它很容易,最好不要使用jQuery).

说明:如果新DOM已完全加载,脚本将每隔200ms检查一次,然后滚动到顶部并停止检查.我试过没有这个200ms循环,它有时无法滚动,因为页面没有完全显示.