0

Tenho um projeto em angular, da qual com o $routeProvider defino minhas views e chamo as devidas controllers, e utilizo o <ng-view></ng-view> para apresenta-las em meu site.

São poucas páginas, porem são paginas com barra de rolagem, e ao clicar em um link que troco de uma view para outra <a ng-href="/projeto/#/produto/{{produtoId}}>{{produtoNome}}</a>.

Porém, quando passa para a próxima página, a rolagem está na mesma altura, ela não volta ao topo, sei que é por ser uma SPA, não está literalmente trocando de página. Mas existe alguma maneira fácil do angular, de sempre que trocar de rota, a rolagem da página voltar sempre ao topo?

Obrigado.

8
  • Acho que e isso o que procura docs.angularjs.org/api/ng/service/$anchorScroll Commented 9/02/2017 às 17:13
  • @MarceloBonifazio na verdade não, vou tentar montar um exemplo do meu caso e ja edito a pergunta. Commented 9/02/2017 às 17:15
  • Da uma olhada ai :) stackoverflow.com/a/27430246/3956218 Commented 9/02/2017 às 17:26
  • @MarceloBonifazio caraca! é exatamente isso que eu queria! hahaha, olhei a teoria q isso deve fazer o q eu preciso! porem eu não estou conseguindo fazer funcionar hahaha, preciso de alguma dependência do angular para esse $rootScope.$on? vi que o autor da pergunta usa o angular-ui-route, eu uso apenas o angular-route. isso implica no evento $stateChangeSuccess? Obrigado :D Commented 9/02/2017 às 17:35
  • acho que usar location.href='#altura'; seria mais simples no seu caso, vou editar a resposta do Thiago usando, vê se funciona... não tem problema usar funções nativas de javascript dentro de um $scope angular, funciona do mesmo jeito :) Commented 9/02/2017 às 17:37

1 Resposta 1

1

Utilizando somente o Angular, encontrei a Documentação do ngView, que recomenda usar:

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

Mas se você quiser usar um pouco de jQuery faz o seguinte, adiciona a Função de Scroll a todos os <a> usando .delegate() assim o jQuery atibui mesmo aos <a> criados dinamicamente pelo AngularJS :

$("body").delegate("a", "click", function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
});
#altura {
  height: 1000px;
  width: 100%;
  background: #EEE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="altura"></div>
<a>Todos os Links</a>

E se você quiser fazer usando somente JS puro:

var Anchors = document.getElementsByTagName("a");

for (var i = 0; i < Anchors.length ; i++) {
    Anchors[i].addEventListener("click", 
        function() {
            document.body.scrollTop = 0;
        }, 
        false);
}
#altura {
  height: 1000px;
  width: 100%;
  background: #EEE;
}
<div id="altura"></div>
<a>Todos os Links</a>

Outra solução usando JS Puro:

#altura {
  height: 1000px;
  width: 100%;
  background: #EEE;
}
<div id="altura"></div>
<a onclick="location.href='#altura'">Todos os Links</a>

10
  • Com isso você diz que com o Angular.js não há nenhum jeito de fazer isto mesmo? Eu pensei em fazer da mesma forma que você mostrou (mas sem usar o jquery pois não inclui a dependência dele no meu projeto, utilizando apenas javascript). Mas preferi perguntar para saber se há algum meio nativo do Angular que faria isso. Obrigado. Commented 9/02/2017 às 17:12
  • @AldoFernandesJunior Você não usa jQuery? Vou alterar então! Olha você quer somente com Angular e sem usar JS nativo, isso? Commented 9/02/2017 às 17:17
  • @ThiagoSantos tomei a liberdade de acrescentar meu exemplo na sua resposta, se não se importar Commented 9/02/2017 às 17:38
  • @MarceloBonifazio não me importo, mas ele teria que adicionar esse onCLick em todos os elementos, não sei se ele deseja isso Commented 9/02/2017 às 17:42
  • 1
    @AldoFernandesJunior Fico feliz em ajudar e, deixando uma dica, parece que search skill é uma coisa natural, mas não é, então sempre dá aquela forçadinha extra na pesquisa que tu vai melhorando sim. Um abraço! Commented 9/02/2017 às 19:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .