我遇到一种情况，如果用户在主页上的浏览器中向下滚动并对任何将他带到另一个页面或路线的事件执行操作，则滚动条位置与主页相同。当用户重定向到不同页面时，如何将滚动条保持在顶部？我在下面的代码中尝试了自动滚动，但这似乎不起作用任何建议将不胜感激。谢谢
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>
滚动.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();
});
});
最佳答案
您可以使用$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();
});
关于javascript - 如何在 AngularJS 中更改路由时将浏览器滚动条保持在顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31543877/