How to Scroll to Top of Page on Changing Location in AngularJS App

In this post I discuss a quick way of fixing a minor annoyance you may experience while developing apps with AngularJS. Specifically, you may notice that when your app navigates from one url to another, the scroll location remains the same, which could causes lots of usability issues. To fix this, in your Angular module’s run method, call anchorscroll() in a callback function to the $locationChangeSuccess event as follows:

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

References

Changing route doesn’t scroll to top in the new page. Stack Overflow. http://stackoverflow.com/questions/21055952/changing-route-doesnt-scroll-to-top-in-the-new-page.

Leave a Reply

Your email address will not be published. Required fields are marked *