Autoscroll to TOP с ui-router и Angularjs

Я читал так много разных проблем с этим, и ни одно из приведенных решений, похоже, не соответствует моему варианту использования. Я начал с простого размещения target = "_ top" во всех моих ссылках, но это фактически заставляет мое приложение перезагружать, что не работает. Я также видел, что люди говорят, что используют autoscroll = "true" , но это работает только в том случае, если оно находится в моем ui-view.

Проблема в том, что в моем файле index.html у меня есть фиксированный nav и другие статические элементы, которые выше моего первого ui-view. Это означает, что когда я перехожу на другие страницы, я теряю навигацию, поскольку страница загружается мимо этих элементов. Я также попытался положить это на тело с помощью:

<body autoscroll="true">
</body>

Это тоже ничего не делает. Итак, вопрос в том, как я могу убедиться, что новые страницы (новые изменения маршрута с ui-router) приводят к началу в верхней части страницы? СПАСИБО!

Ответ 1

Если вы хотите, чтобы он всегда прокручивался до 0 кросс-браузера, ничего не делайте с помощью autoscroll. Просто разместите этот блок выполнения:

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

Ответ 2

У меня была точно такая же проблема: фиксированный 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();
    });
});

Ответ 3

Я использую ui-router. Мой прогон выглядел так:

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

Ответ 4

Для этого существует служба 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();
    });

});

Ответ 5

Мне пришлось сделать комбинацию двух других ответов.

<div ui-view autoscroll="false"></div>

В сочетании с

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

Примечание.. Это v0.2.15 из ui-router

Ответ 6

То же самое, что и исключенный ответ от @TaylorMac, но в $locationChangeStart.

index.run.js:

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

Ответ 7

Используя версию 1.0.6, событие $stateChangeSuccess устарело в пользу службы $transitions. Вот код, который я использовал для прокрутки вверху при каждом изменении состояния:

app.run(['$transitions', function ($transitions) {
    $transitions.onSuccess({}, function () {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    })
}]);