Я читал так много разных проблем с этим, и ни одно из приведенных решений, похоже, не соответствует моему варианту использования. Я начал с простого размещения target = "_ top" во всех моих ссылках, но это фактически заставляет мое приложение перезагружать, что не работает. Я также видел, что люди говорят, что используют autoscroll = "true" , но это работает только в том случае, если оно находится в моем ui-view.
Проблема в том, что в моем файле index.html у меня есть фиксированный nav и другие статические элементы, которые выше моего первого ui-view. Это означает, что когда я перехожу на другие страницы, я теряю навигацию, поскольку страница загружается мимо этих элементов. Я также попытался положить это на тело с помощью:
<body autoscroll="true">
</body>
Это тоже ничего не делает. Итак, вопрос в том, как я могу убедиться, что новые страницы (новые изменения маршрута с ui-router) приводят к началу в верхней части страницы? СПАСИБО!
Если вы хотите, чтобы он всегда прокручивался до 0 кросс-браузера, ничего не делайте с помощью autoscroll. Просто разместите этот блок выполнения:
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
У меня была точно такая же проблема: фиксированный navbar при изменении маршрута, загрузка страницы частично прокручивалась по странице.
Я просто добавил autoscroll="false" в ui-view, например:
<div ui-view="main" autoscroll="false"></div>
изменить
Просто протестировал этот метод, бит грязного взлома, но он работает. Импортируйте службы angular $anchorScroll и $location в соответствующие контроллеры для конфигурации ui-router .state. Затем используйте $watch на ui-router $stateParams для вызова $location.hash('top'); при изменении маршрута/состояния.
https://docs.angularjs.org/api/ng/service/ $anchorScroll
https://docs.angularjs.org/api/ng/service/ $location # hash
.controller('myCtrl', function ($location, $anchorScroll, $scope, $stateParams) {
$scope.$watchCollection('$stateParams', function() {
$location.hash('top');
$anchorScroll();
});
});
Я использую ui-router. Мой прогон выглядел так:
.run(function($rootScope, $state, $stateParams){
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
})
Для этого существует служба Angular. https://docs.angularjs.org/api/ng/service/$anchorScroll
Пример кода:
.run(function ($rootScope, $state, $stateParams, $anchorScroll) {
$rootScope.$on('$stateChangeStart', function () {
$anchorScroll();
});
});
Если вы хотите перейти к определенному элементу
.run(function ($rootScope, $state, $stateParams, $anchorScroll) {
$rootScope.$on('$stateChangeStart', function () {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
});
});
Мне пришлось сделать комбинацию двух других ответов.
<div ui-view autoscroll="false"></div>
В сочетании с
$rootScope.$on('$stateChangeSuccess', function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
});
Примечание.. Это v0.2.15 из ui-router
То же самое, что и исключенный ответ от @TaylorMac, но в $locationChangeStart.
index.run.js:
$rootScope.$on('$locationChangeStart', function() {
document.body.scrollTop = document.documentElement.scrollTop = 0;
}); Используя версию 1.0.6, событие $stateChangeSuccess устарело в пользу службы $transitions. Вот код, который я использовал для прокрутки вверху при каждом изменении состояния:
app.run(['$transitions', function ($transitions) {
$transitions.onSuccess({}, function () {
document.body.scrollTop = document.documentElement.scrollTop = 0;
})
}]);