Question

当加载我的Angular应用程序中的某些页面时，它们不在页面顶部。

我已尝试在autoscroll="true"上使用ng-view，但这不起作用。我相信这是因为在ng-view以上我有一个导航菜单有一些“复杂”的定位。

所以我试图将$window.scrollTo(0,0);与$routeChangeSuccess一起使用，但它根本不起作用。

任何可能出错的想法？

.run(['$rootScope', '$route', '$window', function($rootScope, $route, $window) {
  $rootScope.$on('$routeChangeSuccess', function() {
    $window.scrollTo(0,0);
      //Some other stuff here relating to meta and title in head
    });
}])

添加其他代码 - 我想重要的是要提到ngview位于我自己的'contentSection'中：

<contentSection id="theContentSection">
      <ng-view autoscroll="true"></ng-view>
</contentSection>

解决方案：

使用：angular.element('#theContentSection')[0].scrollTop = 0;

修复此问题

感谢。

Answer 1

你试试这个..

.run(function($rootScope, $state, $stateParams){
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
  $rootScope.$on('$stateChangeSuccess', function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }); 
})

否则只需添加此

<ui-view autoscroll="true" />

$rootScope.$on('$stateChangeSuccess', function() {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
});

Answer 2

尝试使用viewContentLoaded事件。

根据文件

$ viewContentLoaded - 在呈现DOM之后加载视图时触发

但是你还需要额外的一些时间才能使其正常工作

     $rootScope.$on('$viewContentLoaded', function(event) {
         $timeout(function() {window.scrollTo(0,0)},1000);
     });

Angular - 当autoscroll =“true”不起作用时滚动到顶部

2 个答案: