Always return to the top of the screen by clicking on links of a SPA with Angular.Js

Question

I have an angular design, of which with the $routeProvider define my views and call the appropriate controllers, and use the <ng-view></ng-view> to present them on my website.

They are few pages, but they are pages with a scroll bar, and when clicking on a link I change from one view to another <a ng-href="/projeto/#/produto/{{produtoId}}>{{produtoNome}}</a>.

However, when it goes to the next page, the scrolling is at the same height, it does not go back to the top, I know it is because it is a SPA, it is not literally changing pages. But there is some easy way of angular, of whenever change route, scrolling the page always return to the top?

Thank you.

Answer 1

Using only Angular, I found the ngView documentation, which recommends using:

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

But if you want to use a little jQuery does the following, adds the Scroll Function to all <a> using .delegate() so jQuery threw even to <a> dynamically created by 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>

And if you want to do using only pure JS:

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>

Another solution using Pure JS:

#altura {
  height: 1000px;
  width: 100%;
  background: #EEE;
}

<div id="altura"></div>
<a onclick="location.href='#altura'">Todos os Links</a>