web-dev-qa-db-fra.com

Défilement automatique vers TOP avec ui-router et Angularjs

J'ai lu tellement de problèmes différents avec cela et aucune des solutions proposées ne semble correspondre à mon cas d'utilisation. J'ai commencé par mettre simplement target = "_ top" sur tous mes liens, mais cela force en fait mon application à recharger, ce qui ne fonctionnera pas. J'ai aussi vu des gens dire qu'ils utilisaient autoscroll = "true" mais cela ne semble fonctionner que si c'est dans mon i-view.

Le problème avec ceci est que dans mon fichier index.html j'ai corrigé la navigation et d'autres éléments statiques qui sont au-dessus de ma première vue ui. Cela signifie que lorsque je vais sur d'autres pages, je perds la navigation car la page se charge au-delà de ces éléments. J'ai aussi essayé de mettre ça sur le corps avec:

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

Cela ne semble rien faire non plus. La question est donc de savoir comment puis-je m'assurer que les nouvelles pages (les nouveaux changements de route de ui-router) donnent lieu à un démarrage en haut de la page? MERCI!

javascriptangularjsangular-ui-router
65
Mr. BigglesWorth

Si vous voulez qu'il défile toujours jusqu'à 0 navigateur croisé, ne faites rien avec le défilement automatique. Il suffit de placer ceci votre bloc d'exécution:

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

en utilisant la version 1.0.6 , le $stateChangeSuccess événement est déconseillé en faveur de la $transitions un service. Voici le code que j'ai utilisé pour faire défiler vers le haut à chaque changement d'état:

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

J'ai eu exactement le même problème, barre de navigation fixe sur les changements de route, le chargement de page partiellement défiler vers le bas de la page.

Je viens d'ajouter autoscroll="false" À ui-view, Comme ceci:

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

modifier

Je viens de tester cette méthode, un peu un bidouillage sale, mais cela fonctionne. Importer angular services $anchorScroll & $location Dans les contrôleurs appropriés pour la configuration ui-router .state. Utilisez ensuite un $watch sur le routeur ui $stateParams pour appeler $location.hash('top'); lorsque la route/l'état change.

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();
    });
});
12
cheekybastard

Il existe un service Angular pour cela. https://docs.angularjs.org/api/ng/service/$anchorScroll

Exemple de code:

.run(function ($rootScope, $state, $stateParams, $anchorScroll) {

    $rootScope.$on('$stateChangeStart', function () {
        $anchorScroll();
    });

});

Si vous voulez faire défiler jusqu'à un élément spécifique

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

});
4
Dilhan Jayathilake

J'utilise ui-router. Ma course ressemblait à ceci:

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

Je devais faire une combinaison des deux autres réponses.

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

En combinaison avec

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

Note: Ceci est sur la v0.2.15 du routeur ui

2
rgpass

A fait la même chose que la réponse exclue de @TaylorMac mais dans $ locationChangeStart.

index.run.js:

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