如何在AngularJS中更改路線時將瀏覽器滾動條保留在頂部？

我有一種情況，如果用戶在主頁上的瀏覽器中向下滾動，並對任何將他帶到其他頁面或路線的事件執行操作，則滾動條位置與主頁相同。當用戶重定向到不同的頁面時，我怎樣才能保持滾動條在頂部？我在下面的代碼嘗試autoscroll，但似乎並沒有工作任何suggetion將不勝感激。由於如何在AngularJS中更改路線時將瀏覽器滾動條保留在頂部？

的index.html

<!DOCTYPE html> 
    <html ng-app="riskAssessmentApp"> 
     <head> 
      <meta charset="utf-8"> 
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
      <meta name="viewport" content="width=device-width"> 

      <title>Risk Assessment</title> 

      <link rel="icon" type="image/x-icon" href="favicon.ico"> 

      <!-- bootstrap.css contains normalize, so it needs to go first --> 
      <!-- build:css(.tmp) styles/main.css --> 
      <link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/bootstrap.css"> 
      <link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/kendo.bootstrap.css"> 
      <link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/kendo.common-bootstrap.css"> 
      <link rel="stylesheet" href="bower_components/orcit-theme/dist/styles/orcit.css"> 
      <link rel="stylesheet" href="bower_components/bac-multiselect/bacMultiselect.css"> 
      <link rel="stylesheet" href="styles/site.css"> 
      <link rel="stylesheet" href="styles/bootstrap-override.css"> 
      <link rel="stylesheet" href="styles/kendo-override.css"> 
      <link rel="stylesheet" href="styleNew/multiselect-treeview.css"> 
      <link rel="stylesheet" href="styleNew/main.css"> 
      <link rel="stylesheet" href="styles/style.css"> 
      <!-- endbuild --> 
     </head> 
     <body> 
      <div ui-view autoscroll="false"></div> 

      <!-- build:js scripts/scripts.js --> 
      <script src="bower_components/orcit-bower/src/jquery/dist/jquery.js"></script> 
      <script src="bower_components/orcit-bower/src/angular/angular.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-cookies/angular-cookies.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-off-click/offClick.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-resource/angular-resource.js"></script> 
      <script src="bower_components/orcit-bower/src/spin.js/spin.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-spinner/angular-spinner.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/accordion/accordion.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/bindHtml/bindHtml.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/collapse/collapse.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/modal/modal.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/position/position.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/tooltip/tooltip.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-ui-bootstrap/src/transition/transition.js"></script> 
      <script src="bower_components/orcit-bower/src/angular-ui-router/angular-ui-router.js"></script> 

      <script src="bower_components/orcit-bower/src/angular/angular.min.js"></script> 
      <script src="bower_components/orcit-bower/src/kendo/js/kendo.web.min.js"></script> 
      <script src="bower_components/orcit-bower/src/kendo/js/kendo.all.min.js"></script> 


      <script src="bower_components/bac-multiselect/bacMultiselect.js"></script> 
      <script src="bower_components/kendo-multiselect-treeview/kendo-multiselect-treeview.js"></script> 
    </body> 
    </html>

scroll.js

angular.module('riskAssessmentApp').run(function($rootScope, $anchorScroll) { 
    /* scroll to the top of the page after the route successfully changes */ 
    $rootScope.$on('$routeChangeSuccess', function() { 
     $anchorScroll(); 
    }); 
});

來源

2015-07-21 aftab

您可以使用$anchorScroll滾動到頁面每次路線發生改變的頂部。

angular.module('YOUR_APP') 
    .run(function($rootScope, $anchorScroll) { 
     /* scroll to the top of the page after the route successfully changes */ 
     $rootScope.$on('$routeChangeSuccess', function() { 
      $anchorScroll(); 
     }); 
    }) 
    .config(function($uiViewScrollProvider) { 
     $uiViewScrollProvider.useAnchorScroll(); 
    });

來源

2015-07-21 16:10:08

都能跟得上！我用你的代碼編輯了我的問題，但它仍然不工作，我創建了新的js文件並在其中添加了模塊。我們是否需要將$ anchorScroll的依賴注入到控制器中？ – aftab

我們如何在廣播和哪裏？ – aftab

要在ui-router上使用anchorScroll，你需要添加這個'''uiViewScrollProvider.useAnchorScroll（）'' – Mindstormy

下面的代碼解決了我的問題..

angular.module('Your-App').run(function($rootScope,$window) { 
     /* scroll to the top of the page after the route successfully changes */ 
    $rootScope.$on('$viewContentLoaded', function(){ 
     $window.scrollTo(0, 0); 
    }); 
});

來源

2015-07-21 17:21:11 aftab

如何在AngularJS中更改路線時將瀏覽器滾動條保留在頂部？

回答

相關問題