Автопрокрутка в ТОП с помощью ui-router и Angularjs

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

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

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

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

Источник

7 ответов

Решение

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

$rootScope.$on('$stateChangeSuccess', 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;
    })
}]);
Источник

У меня была точно такая же проблема, исправил navbar при смене маршрута, загрузка страницы частично прокручивалась вниз по странице.

Я только добавил autoscroll="false" в ui-view, вот так:

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

редактировать

Только что проверил этот метод, немного грязного взлома, но он работает. Импорт угловых услуг $anchorScroll & $location в соответствующие контроллеры для UI-роутера .state конфигурации. Тогда используйте $watch на UI-роутере $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();
    });
});
Источник

Для этого есть сервис 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();
    });

});
Источник

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

.run(function($rootScope, $state, $stateParams){
  $rootScope.$state = $state;
  $rootScope.$stateParams = $stateParams;
  $rootScope.$on('$stateChangeSuccess', function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }); 
})
Источник

Я должен был сделать комбинацию двух других ответов.

<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;
});

Источник
Другие вопросы по тегам