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?
fonte
<div class="ng-view" autoscroll></div>
e ele funciona da mesma forma (a menos que você queira tornar a rolagem condicional).$window.scrollTo(0,0)
ouvinte de evento $ stateChangeSuccessBasta colocar esse código para executar
fonte
$window.scrollTop(0,0)
funciona melhor para mim do que a rolagem automática. No meu caso, tenho visualizações que entram e saem com transições.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 ..
Aqui está a ordem de chamada do módulo Angularjs:
app.config()
app.run()
directive's compile functions (if they are found in the dom)
app.controller()
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
e agora você pode ver o rolo começar no topo com a nova exibição roteada :)
fonte
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):
fonte
$locationProvider.html5Mode(true);
@wkronkel existe uma maneira de fazer isso quando não estiver usando o modo HTML5 em ângulo? Porque recarregar a página está jogando 404 erros devido a html 5 modo de ser ativo.run
? o angular seuapp
objeto?run
função é um método disponível em todos os objetos de módulos angulares.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).
PS: Descobri que a coisa de rolagem automática não tinha efeito, seja configurada como verdadeira ou falsa.
fonte
Usando o angularjs UI Router, o que estou fazendo é o seguinte:
Com:
Ele nunca falha em nenhuma página e não é global.
fonte
onEnter: scrollContent
// Your favorite scroll method here
?$('html, body').animate({ scrollTop: -10000 }, 100);
onEnter: scrollContent
em cada vista que funciona apenas na primeira vista / rota, e não na segunda. Estranho.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"
seuui-view
.Por exemplo:
http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view
fonte
você pode usar esse javascript
fonte
$location.hash('top')
antes$anchorScroll()
dos botões padrão de avançar / voltar do navegador, não funcionará mais; eles continuam redirecionando você para o hash na URLSe você usa o ui-router, pode usar (em execução)
fonte
Encontrei esta solução. Se você for para uma nova visualização, a função será executada.
fonte
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:
Cadastro:
fonte
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:
Meu initCtrl.js se parece com:
Eu tentei todas as opções possíveis, esse método funciona melhor.
fonte
id="top-nav"
foi importante colocar o elemento correto.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!):
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
document
comandos brutos para rolar, porque quero ir para o topo inteiro da janela. Se você quiser apenasui-view
rolar, definaautoscroll="my_var"
onde você controlamy_var
usando 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
$routeChangeSuccess
por$stateChangeSuccess
.fonte
var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) { $urlRouterProvider.otherwise('/home'); $locationProvider.html5Mode(false).hashPrefix(""); $stateProvider // HOME STATES AND NESTED VIEWS ======================================== .state('home', { url: '/home', templateUrl: 'partial-home.html' }) });
.state('web', { url: '/webdev', templateUrl: 'partial-web.html', controller: function($scope) { $scope.clients = ['client1', 'client2', 'client3']; // I put it here } })
Estou aprendendo essas coisas, talvez eu estou faltando alguma coisa: DNenhuma 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:
Eu o inseri no meu modo de exibição da seguinte maneira:
fonte
Solução simples, adicione
scrollPositionRestoration
o módulo de rota principal ativado.Como isso:
fonte
Experimente este http://ionicframework.com/docs/api/service/ $ ionicScrollDelegate /
Rola até o topo da lista scrollTop ()
fonte
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 simples
noScroll: 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
/Back
transitions e permite que você substitua esse comportamento, se necessário.O código: (solução anterior mais uma opção noScroll extra)
Coloque isso no seu
app.run
bloco 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:
fonte
Isso funcionou para mim, incluindo rolagem automática
<div class="ngView" autoscroll="true" >
fonte