Autoscroll to TOP с ui-маршрутизатором и Angularjs

Question

Autoscroll to TOP с ui-маршрутизатором и Angularjs

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

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

<body autoscroll="true">

</body>

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

572 7

javascript angularjs angular-ui-router

7 ответов:

Comments

Ничего не найдено.

TaylorMac · Accepted Answer · 2014-12-11 20:50:11

Если вы хотите, чтобы он всегда прокручивался до 0 кросс-браузера, ничего не делайте с автопрокруткой. Просто поместите этот блок запуска:
$rootScope.$on('$stateChangeSuccess', function() {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
});

cheekybastard · Accepted Answer · 2014-10-20 07:33:07

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

Я только что добавил autoscroll="false" до ui-view, например:
<div ui-view="main" autoscroll="false"></div>
edit

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

mdickin · Accepted Answer · 2017-12-06 06:30:40

при использовании версии 1.0.6 на $stateChangeSuccess событие устарело в пользу $transitions сервис. Вот код, который я использовал для прокрутки вверх при каждом изменении состояния:
app.run(['$transitions', function ($transitions) {
    $transitions.onSuccess({}, function () {
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    })
}]);

Bessie Malek · Accepted Answer · 2016-07-26 23:18:55

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

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

Dilhan Jayathilake · Accepted Answer · 2017-04-18 02:46:33

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

});

rgpass · Accepted Answer · 2016-02-04 22:03:25

Я должен был сделать комбинацию из двух других ответов.
<div ui-view autoscroll="false"></div>
в сочетании с
$rootScope.$on('$stateChangeSuccess', function() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
});
Примечание: это на v0.2. 15 ui-router

sigmapi13 · Accepted Answer · 2017-04-27 13:14:51

сделал то же самое, что и исключенный ответ от @TaylorMac, но в $locationChangeStart.
.бежать.js:
$rootScope.$on('$locationChangeStart', function() {
   document.body.scrollTop = document.documentElement.scrollTop = 0;
});