Le changement d'itinéraire ne défile pas en haut de la nouvelle page

J'ai trouvé un comportement indésirable, du moins pour moi, lorsque l'itinéraire change. À l'étape 11 du didacticiel http://angular.github.io/angular-phonecat/step-11/app/#/phones, vous pouvez voir la liste des téléphones. Si vous faites défiler vers le bas et cliquez sur l'un des derniers, vous pouvez voir que le défilement n'est pas en haut, mais plutôt au milieu.

J'ai également trouvé cela dans l'une de mes applications et je me demandais comment puis-je faire défiler vers le haut. Je peux le faire manuellement, mais je pense qu'il devrait y avoir une autre manière élégante de le faire que je ne connais pas.

Alors, existe-t-il un moyen élégant de faire défiler vers le haut lorsque l'itinéraire change?

Le problème est que votre ngView conserve la position de défilement lors du chargement d'une nouvelle vue. Vous pouvez demander $anchorScrollde "faire défiler la fenêtre après la mise à jour de la vue" (les documents sont un peu vagues, mais faire défiler ici signifie faire défiler vers le haut de la nouvelle vue).

La solution consiste à ajouter autoscroll="true"à votre élément ngView:

<div class="ng-view" autoscroll="true"></div>

Il suffit de mettre ce code à exécuter

$rootScope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {

    window.scrollTo(0, 0);

});

Ce code a très bien fonctionné pour moi .. J'espère qu'il fonctionnera également très bien pour vous .. Tout ce que vous avez à faire est d'injecter simplement $ anchorScroll à votre bloc d'exécution et d'appliquer la fonction d'écoute au rootScope comme je l'ai fait dans l'exemple ci-dessous ..

 angular.module('myAngularApp')
.run(function($rootScope, Auth, $state, $anchorScroll){
    $rootScope.$on("$locationChangeSuccess", function(){
        $anchorScroll();
    });

Voici l'ordre d'appel du module Angularjs:

1. app.config()
2. app.run()
3. directive's compile functions (if they are found in the dom)
4. app.controller()
5. directive's link functions (again, if found)

RUN BLOCK est exécuté après la création de l'injecteur et est utilisé pour démarrer l'application .. cela signifie que lorsque vous êtes redirigé vers la nouvelle vue de route, l'écouteur du bloc d'exécution appelle le

$ anchorScroll ()

et vous pouvez maintenant voir le défilement commencer vers le haut avec la nouvelle vue routée :)

Après une heure ou deux d'essayer toutes les combinaisons de ui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(), $provide('$uiViewScroll', ...), et bien d' autres, je ne pouvais pas défiler à haut sur la page nouvelle au travail comme prévu.

C'est finalement ce qui a fonctionné pour moi. Il capture pushState et replaceState et ne met à jour la position de défilement que lorsque de nouvelles pages sont parcourues (les boutons Précédent / Suivant conservent leurs positions de défilement):

.run(function($anchorScroll, $window) {
  // hack to scroll to top when navigating to new URLS but not back/forward
  var wrap = function(method) {
    var orig = $window.window.history[method];
    $window.window.history[method] = function() {
      var retval = orig.apply(this, Array.prototype.slice.call(arguments));
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');
})

Voici ma solution (apparemment) robuste, complète et (assez) concise. Il utilise le style compatible avec la minification (et l'accès angular.module (NAME) à votre module).

angular.module('yourModuleName').run(["$rootScope", "$anchorScroll" , function ($rootScope, $anchorScroll) {
    $rootScope.$on("$locationChangeSuccess", function() {
                $anchorScroll();
    });
}]);

PS J'ai trouvé que la fonction de défilement automatique n'avait aucun effet, qu'elle soit définie sur true ou false.

En utilisant angularjs UI Router, ce que je fais est le suivant:

    .state('myState', {
        url: '/myState',
        templateUrl: 'app/views/myState.html',
        onEnter: scrollContent
    })

Avec:

var scrollContent = function() {
    // Your favorite scroll method here
};

Il n'échoue jamais sur aucune page et n'est pas global.

Pour info pour toute personne rencontrant le problème décrit dans le titre (comme je l'ai fait) qui utilise également le plugin AngularUI Router ...

Comme demandé et répondu dans cette question SO, le routeur angular-ui saute au bas de la page lorsque vous changez de route.
Vous ne pouvez pas comprendre pourquoi la page se charge en bas? Problème de défilement automatique de l'interface utilisateur angulaire

Cependant, comme l'indique la réponse, vous pouvez désactiver ce comportement en disant autoscroll="false"sur votre ui-view.

Par exemple:

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

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view

vous pouvez utiliser ce javascript

$anchorScroll()

Si vous utilisez ui-router, vous pouvez utiliser (en cours d'exécution)

$rootScope.$on("$stateChangeSuccess", function (event, currentState, previousState) {
    $window.scrollTo(0, 0);
});

J'ai trouvé cette solution. Si vous passez à une nouvelle vue, la fonction est exécutée.

var app = angular.module('hoofdModule', ['ngRoute']);

    app.controller('indexController', function ($scope, $window) {
        $scope.$on('$viewContentLoaded', function () {
            $window.scrollTo(0, 0);
        });
    });

Définir autoScroll sur true n'a pas été un truc pour moi, j'ai donc choisi une autre solution. J'ai créé un service qui se connecte à chaque fois que l'itinéraire change et qui utilise le service $ anchorScroll intégré pour faire défiler vers le haut. Travaille pour moi :-).

Un service:

 (function() {
    "use strict";

    angular
        .module("mymodule")
        .factory("pageSwitch", pageSwitch);

    pageSwitch.$inject = ["$rootScope", "$anchorScroll"];

    function pageSwitch($rootScope, $anchorScroll) {
        var registerListener = _.once(function() {
            $rootScope.$on("$locationChangeSuccess", scrollToTop);
        });

        return {
            registerListener: registerListener
        };

        function scrollToTop() {
            $anchorScroll();
        }
    }
}());

Enregistrement:

angular.module("mymodule").run(["pageSwitch", function (pageSwitch) {
    pageSwitch.registerListener();
}]);

Un peu tard pour la fête, mais j'ai essayé toutes les méthodes possibles, et rien n'a fonctionné correctement. Voici ma solution élégante:

J'utilise un contrôleur qui régit toutes mes pages avec ui-router. Cela me permet de rediriger les utilisateurs qui ne sont pas authentifiés ou validés vers un emplacement approprié. La plupart des gens mettent leur middleware dans la configuration de leur application, mais j'avais besoin de quelques requêtes http, donc un contrôleur global fonctionne mieux pour moi.

Mon index.html ressemble à:

<main ng-controller="InitCtrl">
    <nav id="top-nav"></nav>
    <div ui-view></div>
</main>

Mon initCtrl.js ressemble à:

angular.module('MyApp').controller('InitCtrl', function($rootScope, $timeout, $anchorScroll) {
    $rootScope.$on('$locationChangeStart', function(event, next, current){
        // middleware
    });
    $rootScope.$on("$locationChangeSuccess", function(){
        $timeout(function() {
            $anchorScroll('top-nav');
       });
    });
});

J'ai essayé toutes les options possibles, cette méthode fonctionne le mieux.

Toutes les réponses ci-dessus interrompent le comportement attendu du navigateur. Ce que la plupart des gens veulent, c'est quelque chose qui défilera vers le haut s'il s'agit d'une "nouvelle" page, mais reviendra à la position précédente si vous y arrivez via le bouton Précédent (ou Suivant).

Si vous assumez le mode HTML5, cela se révèle facile (même si je suis sûr que certaines personnes brillantes peuvent trouver comment rendre cela plus élégant!):

// Called when browser back/forward used
window.onpopstate = function() { 
    $timeout.cancel(doc_scrolling); 
};

// Called after ui-router changes state (but sadly before onpopstate)
$scope.$on('$stateChangeSuccess', function() {
    doc_scrolling = $timeout( scroll_top, 50 );

// Moves entire browser window to top
scroll_top = function() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}

La façon dont cela fonctionne est que le routeur suppose qu'il va défiler vers le haut, mais tarde un peu pour donner au navigateur une chance de terminer. Si le navigateur nous informe alors que le changement est dû à une navigation en arrière / en avant, il annule le délai d'attente et le défilement ne se produit jamais.

J'ai utilisé des documentcommandes brutes pour faire défiler, car je veux passer en haut de la fenêtre. Si vous voulez juste que votre ui-viewdéfilement, définissez autoscroll="my_var"où vous contrôlez en my_varutilisant les techniques ci-dessus. Mais je pense que la plupart des gens voudront faire défiler la page entière si vous allez sur la page comme "nouvelle".

Ce qui précède utilise ui-router, bien que vous puissiez utiliser ng-route à la place en échangeant $routeChangeSuccesspour $stateChangeSuccess.

Aucune des réponses fournies n'a résolu mon problème. J'utilise une animation entre les vues et le défilement se produira toujours après l'animation. La solution que j'ai trouvée pour que le défilement vers le haut se produise avant l'animation est la directive suivante:

yourModule.directive('scrollToTopBeforeAnimation', ['$animate', function ($animate) {
    return {
        restrict: 'A',
        link: function ($scope, element) {
            $animate.on('enter', element, function (element, phase) {

                if (phase === 'start') {

                    window.scrollTo(0, 0);
                }

            })
        }
    };
}]);

Je l'ai inséré à mon avis comme suit:

<div scroll-to-top-before-animation>
    <div ng-view class="view-animation"></div>
</div>

Solution simple, ajoutez scrollPositionRestorationle module de route principal activé.
Comme ça:

const routes: Routes = [

 {
   path: 'registration',
   loadChildren: () => RegistrationModule
},
];

 @NgModule({
  imports: [
   RouterModule.forRoot(routes,{scrollPositionRestoration:'enabled'})
  ],
 exports: [
 RouterModule
 ]
 })
  export class AppRoutingModule { }

Essayez ceci http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

Il défile en haut de la liste scrollTop ()

J'ai enfin obtenu ce dont j'avais besoin.

Je devais faire défiler vers le haut, mais je voulais que certaines transitions ne

Vous pouvez contrôler cela au niveau itinéraire par itinéraire.
Je combine la solution ci-dessus par @wkonkel et j'ajoute un simplenoScroll: true paramètre à certaines déclarations de route. Ensuite, je l'attrape dans la transition.

Dans l'ensemble: cela flotte en haut de la page sur les nouvelles transitions, il ne flotte pas en haut sur Forward/ Backtransitions, et il vous permet de remplacer ce comportement si nécessaire.

Le code: (solution précédente plus une option noScroll supplémentaire)

  // hack to scroll to top when navigating to new URLS but not back/forward
  let wrap = function(method) {
    let orig = $window.window.history[method];
    $window.window.history[method] = function() {
      let retval = orig.apply(this, Array.prototype.slice.call(arguments));
      if($state.current && $state.current.noScroll) {
        return retval;
      }
      $anchorScroll();
      return retval;
    };
  };
  wrap('pushState');
  wrap('replaceState');

Mettez ça dans votre app.runbloc et injectez $state...myApp.run(function($state){...})

Ensuite, si vous ne souhaitez pas faire défiler vers le haut de la page, créez un itinéraire comme celui-ci:

.state('someState', {
  parent: 'someParent',
  url: 'someUrl',
  noScroll : true // Notice this parameter here!
})

Cela a fonctionné pour moi, y compris le défilement automatique

<div class="ngView" autoscroll="true" >