Défilement automatique vers le HAUT, avec ui-router et Angularjs
J'ai lu beaucoup de différents problèmes avec cela et rien de la solution donnée semblent correspondre à mon cas d'utilisation. J'ai commencé tout simplement en mettant target="_top" sur tous mes liens, mais en fait les forces de mon application pour recharger qui ne fonctionnent pas. J'ai aussi vu des gens dire qu'ils utilisent autoscroll="true" mais qui ne semble fonctionner si son dans mon ui-view.
Le problème, c'est que dans mon index.html fichier j'ai fixé la valeur liquidative et autres éléments statiques qui sont au-dessus de ma première ui-view. Cela signifie que lorsque je aller vers les autres pages je perds la navigation et le chargement de la page au-delà de ces éléments. J'ai aussi essayé de mettre cela sur le corps avec:
<body autoscroll="true">
</body>
Cela ne semble pas tout faire non plus. La question est donc, comment faire en sorte que de nouvelles pages (nouveau des changements d'itinéraire à partir de l'ui-router) résultat en commençant par le haut de la page? MERCI!
Vous devez vous connecter pour publier un commentaire.
Si vous le souhaitez toujours faites défiler jusqu'à 0 cross-browser, ne rien faire avec défilement automatique. Il suffit de placer ce votre course bloc:
$document
ce type de service:$document[0].body.scrollTop = $document[0].documentElement.scrollTop = 0;
autoscroll = true
. Il suffit de ne pas oublier d'injecter$document
dans votrerun
bloc comme si..run(function($rootScope, $state, $document, $stateParams){ $rootScope.$state = $state; $rootScope.$stateParams = $stateParams; $rootScope.$on('$stateChangeSuccess', function() { $document[0].body.scrollTop = $document[0].documentElement.scrollTop = 0; }); })
J'ai eu exactement le même problème, fixe barre de navigation sur les modifications d'itinéraire, la page de chargement partiellement défile en bas de la page.
J'ai juste ajouté
autoscroll="false"
àui-view
, comme suit:modifier
Viens de tester cette méthode, peu une sale hack, mais il fonctionne. Importation angulaire des services de
$anchorScroll
&$location
dans les contrôleurs de l'interface utilisateur du routeur.state
config. Ensuite, utilisez un$watch
ui-router$stateParams
appeler$location.hash('top');
sur la route/les changements d'état.https://docs.angularjs.org/api/ng/service/$anchorScroll
https://docs.angularjs.org/api/ng/service/emplacement $#hash
.state
objet?L'aide de la version 1.0.6, le
$stateChangeSuccess
événement est dépréciée en faveur de la$transitions
service. Voici le code que j'ai utilisé pour faire défiler vers le haut sur chaque changement d'état:Il y a un Angulaire de service pour cela.
https://docs.angularjs.org/api/ng/service/$anchorScroll
Exemple De Code:
Si vous voulez faites défiler jusqu'à un élément spécifique
Je suis à l'aide de l'interface utilisateur du routeur. Ma course ressemblait à ceci:
J'ai dû faire une combinaison des deux autres réponses.
En combinaison avec
Remarque: C'est sur v0.2.15 de l'interface utilisateur du routeur
Fait la même chose que l'exception réponse de @TaylorMac mais dans $locationChangeStart.
index.run.js:
JS: