Cambiar la ruta no se desplaza hacia arriba en la nueva página

He encontrado algunos comportamientos no deseados, al menos para mí, cuando cambia la ruta. En el paso 11 del tutorial http://angular.github.io/angular-phonecat/step-11/app/#/phones puede ver la lista de teléfonos. Si te desplazas hacia la parte inferior y haces clic en uno de los últimos, puedes ver que el desplazamiento no está en la parte superior, sino que está en el medio.

También encontré esto en una de mis aplicaciones y me preguntaba cómo puedo hacer que esto se desplace hacia la parte superior. Puedo hacerlo manualmente, pero creo que debería haber otra forma elegante de hacerlo que no conozco.

Entonces, ¿hay una manera elegante de desplazarse hacia la cima cuando cambia la ruta?

El problema es que su ngView conserva la posición de desplazamiento cuando carga una nueva vista. Puede indicar $anchorScroll"desplazar la ventana gráfica después de actualizar la vista" (los documentos son un poco vagos, pero desplazarse aquí significa desplazarse a la parte superior de la nueva vista).

La solución es agregar autoscroll="true"a su elemento ngView:

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

Simplemente ponga este código para ejecutar

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

    window.scrollTo(0, 0);

});

Este código funcionó muy bien para mí ... Espero que también funcione bien para usted ... Todo lo que tiene que hacer es inyectar $ anchorScroll en su bloque de ejecución y aplicar la función de escucha al rootScope como lo hice en el siguiente ejemplo ...

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

Aquí está el orden de llamada del módulo 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 se ejecuta después de crear el inyector y se utiliza para iniciar la aplicación. Esto significa que cuando se redirige a la nueva vista de ruta, el oyente en el bloque de ejecución llama al

$ anchorScroll ()

y ahora puede ver que el desplazamiento comienza en la parte superior con la nueva vista enrutada :)

Después de una o dos horas de intentar todas las combinaciones de ui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(), $provide('$uiViewScroll', ...), y muchos otros, no pude conseguir rollo-a-alto-a-new-page de trabajo como se esperaba.

Esto fue en última instancia lo que funcionó para mí. Captura pushState y replaceState y solo actualiza la posición de desplazamiento cuando se navega por nuevas páginas (el botón de retroceso / avance conserva sus posiciones de desplazamiento):

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

Aquí está mi solución (aparentemente) robusta, completa y (bastante) concisa. Utiliza el estilo compatible de minificación (y el acceso angular.module (NAME) a ​​su módulo).

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

PD: Encontré que el desplazamiento automático no tenía ningún efecto, ya sea establecido en verdadero o falso.

Con angularjs UI Router, lo que estoy haciendo es esto:

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

Con:

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

Nunca falla en ninguna página, y no es global.

Para su información, para cualquiera que se encuentre con el problema descrito en el título (como lo hice yo) y que también está usando el complemento AngularUI Router ...

Como se le preguntó y respondió en esta pregunta SO, el enrutador angular-ui salta al final de la página cuando cambia las rutas.
¿No puedo entender por qué la página se carga en la parte inferior? Problema de desplazamiento automático de UI-Router angular

Sin embargo, como dice la respuesta, puede desactivar este comportamiento diciendo autoscroll="false"en su ui-view.

Por ejemplo:

<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

puedes usar este javascript

$anchorScroll()

Si usa ui-router puede usar (en ejecución)

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

Encontré esta solución. Si va a una nueva vista, la función se ejecuta.

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

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

Establecer autoScroll en verdadero no fue el truco para mí, así que elegí otra solución. Construí un servicio que se conecta cada vez que cambia la ruta y que utiliza el servicio incorporado $ anchorScroll para desplazarse hacia arriba. Funciona para mi :-).

Servicio:

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

Registro:

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

Llegué un poco tarde a la fiesta, pero probé todos los métodos posibles y nada funcionó correctamente. Aquí está mi solución elegante:

Yo uso un controlador que gobierna todas mis páginas con ui-router. Me permite redirigir a los usuarios que no están autenticados o validados a una ubicación adecuada. La mayoría de las personas ponen su middleware en la configuración de su aplicación, pero requiero algunas solicitudes http, por lo tanto, un controlador global funciona mejor para mí.

Mi index.html se ve así:

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

Mi initCtrl.js se ve así:

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

He probado todas las opciones posibles, este método funciona mejor.

Todas las respuestas anteriores rompen el comportamiento esperado del navegador. Lo que la mayoría de la gente quiere es algo que se desplazará hacia la parte superior si se trata de una página "nueva", pero que volverá a la posición anterior si llega a través del botón Atrás (o Adelante).

Si asume el modo HTML5, esto resulta ser fácil (aunque estoy seguro de que algunas personas brillantes pueden descubrir cómo hacer que esto sea más elegante):

// 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 forma en que funciona es que el enrutador asume que se desplazará hacia la parte superior, pero se demora un poco para darle al navegador la oportunidad de terminar. Si el navegador nos notifica que el cambio se debió a una navegación Atrás / Adelante, cancela el tiempo de espera y el desplazamiento nunca ocurre.

Usé documentcomandos sin procesar para desplazarme porque quiero moverme a la parte superior de la ventana. Si solo desea ui-viewdesplazarse, configure autoscroll="my_var"dónde controla my_varutilizando las técnicas anteriores. Pero creo que la mayoría de la gente querrá desplazarse por toda la página si va a la página como "nueva".

Lo anterior usa ui-enrutador, aunque podría usar ng-route en su lugar intercambiando $routeChangeSuccesspor $stateChangeSuccess.

Ninguna de las respuestas proporcionadas resolvió mi problema. Estoy usando una animación entre vistas y el desplazamiento siempre sucedería después de la animación. La solución que encontré para que el desplazamiento hacia la parte superior suceda antes de la animación es la siguiente directiva:

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

            })
        }
    };
}]);

Lo inserté en mi vista de la siguiente manera:

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

Solución simple, agregue scrollPositionRestorationel módulo de ruta principal habilitado.
Me gusta esto:

const routes: Routes = [

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

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

Pruebe esto http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

Se desplaza al principio de la lista scrollTop ()

Finalmente obtuve lo que necesitaba.

Necesitaba desplazarme hacia la parte superior, pero quería algunas transiciones para no

Puede controlar esto en un nivel de ruta por ruta.
Estoy combinando la solución anterior por @wkonkel y agregando un noScroll: trueparámetro simple a algunas declaraciones de ruta. Entonces estoy captando eso en la transición.

En resumen: Este flota en la parte superior de la página en nuevas transiciones, que no flote a la parte superior de Forward/ Backtransiciones, y se le permite invalidar este comportamiento si es necesario.

El código: (solución anterior más una opción adicional noScroll)

  // 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');

Pon eso en tu app.runbloque e inyecta $state...myApp.run(function($state){...})

Luego, si no desea desplazarse hasta la parte superior de la página, cree una ruta como esta:

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

Esto funcionó para mí, incluido el desplazamiento automático

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