Alterar rota não rola para o topo da nova página

Eu encontrei algum comportamento indesejado, pelo menos para mim, quando a rota muda. Na etapa 11 do tutorial http://angular.github.io/angular-phonecat/step-11/app/#/phones, você pode ver a lista de telefones. Se você rolar para a parte inferior e clicar em uma das últimas, poderá ver que a rolagem não está no topo, mas sim no meio.

Eu encontrei isso em um dos meus aplicativos também e fiquei pensando como posso fazer isso rolar para o topo. Posso fazer isso manualmente, mas acho que deve haver outra maneira elegante de fazer isso que eu não conheço.

Então, existe uma maneira elegante de rolar para o topo quando a rota muda?

O problema é que o ngView mantém a posição de rolagem quando carrega uma nova exibição. Você pode instruir $anchorScrolla "rolar a janela de exibição depois que a exibição for atualizada" (os documentos são um pouco vagos, mas rolar aqui significa rolar para o topo da nova exibição).

A solução é adicionar autoscroll="true"ao seu elemento ngView:

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

Basta colocar esse código para executar

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

    window.scrollTo(0, 0);

});

Esse código funcionou muito bem para mim .. Espero que também funcione bem para você .. Tudo o que você precisa fazer é injetar $ anchorScroll no seu bloco de execução e aplicar a função listener ao rootScope, como fiz no exemplo abaixo ..

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

Aqui está a ordem de chamada do 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)

O RUN BLOCK é executado depois que o injetor é criado e é usado para iniciar o aplicativo. Significa que quando você redireciona para a nova exibição de rota, o ouvinte no bloco de execução chama o

$ anchorScroll ()

e agora você pode ver o rolo começar no topo com a nova exibição roteada :)

Depois de uma ou duas horas de tentar todas as combinações de ui-view autoscroll=true, $stateChangeStart, $locationChangeStart, $uiViewScrollProvider.useAnchorScroll(), $provide('$uiViewScroll', ...), e muitos outros, eu não poderia começar de rolagem-to-top-on-new-page a funcionar como esperado.

Isso foi o que funcionou para mim. Ele captura pushState e replaceState e atualiza apenas a posição de rolagem quando novas páginas são navegadas para (o botão voltar / avançar mantém suas posições de rolagem):

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

Aqui está a minha (aparentemente) solução robusta, completa e (razoavelmente) concisa. Ele usa o estilo compatível com minificação (e o acesso angular.module (NAME) ao seu módulo).

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

PS: Descobri que a coisa de rolagem automática não tinha efeito, seja configurada como verdadeira ou falsa.

Usando o angularjs UI Router, o que estou fazendo é o seguinte:

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

Com:

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

Ele nunca falha em nenhuma página e não é global.

FYI para quem se deparar com o problema descrito no título (como eu fiz) que também está usando o plug- in do AngularUI Router ...

Conforme solicitado e respondido nesta pergunta de SO, o roteador angular-ui pula para a parte inferior da página quando você altera as rotas.
Não consegue descobrir por que a página é carregada na parte inferior? Problema de rolagem automática angular do roteador da interface do usuário

No entanto, como a resposta indica, você pode desativar esse comportamento dizendo o autoscroll="false"seu ui-view.

Por exemplo:

<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

você pode usar esse javascript

$anchorScroll()

Se você usa o ui-router, pode usar (em execução)

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

Encontrei esta solução. Se você for para uma nova visualização, a função será executada.

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

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

Definir autoScroll como true não foi o truque para mim, então escolhi outra solução. Criei um serviço que liga sempre que a rota muda e que usa o serviço $ anchorScroll interno para rolar para o topo. Funciona para mim :-).

Serviço:

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

Cadastro:

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

Um pouco atrasado para a festa, mas eu tentei todos os métodos possíveis e nada funcionou corretamente. Aqui está a minha solução elegante:

Eu uso um controlador que governa todas as minhas páginas com ui-router. Ele me permite redirecionar usuários que não são autenticados ou validados para um local apropriado. A maioria das pessoas coloca o middleware na configuração do aplicativo, mas eu solicitei algumas solicitações http, portanto, um controlador global funciona melhor para mim.

Meu index.html se parece com:

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

Meu initCtrl.js se parece com:

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

Eu tentei todas as opções possíveis, esse método funciona melhor.

Todas as respostas acima quebram o comportamento esperado do navegador. O que a maioria das pessoas deseja é algo que irá rolar para o topo se for uma página "nova", mas retorne à posição anterior se você estiver chegando lá através do botão Voltar (ou Avançar).

Se você assumir o modo HTML5, isso será fácil (embora eu tenha certeza de que algumas pessoas brilhantes podem descobrir como tornar isso mais 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;
}

A maneira como funciona é que o roteador assume que vai rolar para o topo, mas demora um pouco para dar ao navegador a chance de terminar. Se o navegador nos notificar que a alteração ocorreu devido a uma navegação Retroceder / Avançar, cancelará o tempo limite e a rolagem nunca ocorrerá.

Eu usei documentcomandos brutos para rolar, porque quero ir para o topo inteiro da janela. Se você quiser apenas ui-viewrolar, defina autoscroll="my_var"onde você controla my_varusando as técnicas acima. Mas acho que a maioria das pessoas vai querer rolar a página inteira se você estiver indo para a página como "nova".

O exemplo acima usa o ui-router, embora você possa usar o ng-route trocando $routeChangeSuccesspor $stateChangeSuccess.

Nenhuma das respostas fornecidas resolveu meu problema. Estou usando uma animação entre modos de exibição e a rolagem sempre acontece após a animação. A solução que encontrei para que a rolagem para o topo aconteça antes da animação é a seguinte diretiva:

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

            })
        }
    };
}]);

Eu o inseri no meu modo de exibição da seguinte maneira:

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

Solução simples, adicione scrollPositionRestorationo módulo de rota principal ativado.
Como isso:

const routes: Routes = [

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

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

Experimente este http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /

Rola até o topo da lista scrollTop ()

Finalmente consegui o que precisava.

Eu precisava rolar para o topo, mas queria algumas transições para não

Você pode controlar isso em um nível de rota por rota.
Estou combinando a solução acima com @wkonkel e adicionando uma simplesnoScroll: true parâmetro a algumas declarações de rota. Então eu estou vendo isso na transição.

Em suma: Isso flutua no topo da página em novas transições, não flutua no topo em Forward/ Backtransitions e permite que você substitua esse comportamento, se necessário.

O código: (solução anterior mais uma opção noScroll extra)

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

Coloque isso no seu app.runbloco e injete$state ...myApp.run(function($state){...})

Então, se você não quiser rolar para o topo da página, crie uma rota como esta:

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

Isso funcionou para mim, incluindo rolagem automática

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