angularJS doesn't scroll to top after changing a view

Question

For example:

A user scrolls down on view A;

Then the user clicks on a link, which takes the user to view B;

The view is changes, but the user's vertical location remains lthe same, and must scroll manually to the top of the screen.

Is it an angular bug?

I wrote a small workaround that uses jquery to scroll to the top; but I don't find the correct event to bind it to.

edit after seeing the comment:

How and WHEN do i pull myself to the top? i'm using jquery but the $viewContentLoaded event is too soon (the method runs, but the page doesn't scroll at that time)

Probably you have fixed height or something. Changing the view angular removes content from ng-view and replace it with new content. For a moment ng-view's height == 0. So if you stay on the bottom of the page it means that page has no reason to pull you back to the top (no height change). — Pawel Uchida-Psztyc, Jun 01 '14 at 14:42
You can wrap your scrolling code into a `$timeout` with a very short timeout, like 100ms. — Tong Shen, Jun 01 '14 at 15:10

score 22 · Accepted Answer · answered Sep 30 '14 at 22:13

22

The solution is to add autoscroll="true" to your ngView element:

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

https://docs.angularjs.org/api/ngRoute/directive/ngView

answered Sep 30 '14 at 22:13

Adriano Resende

2,549
1
30
34

Guilhem Soulas · Answer 2 · 2014-06-01T16:41:09.163

9

Angular doesn't automatically scroll to the top when loading a new view, it just keeps the current scroll position.

Here is the workaround I use:

myApp.run(function($rootScope, $window) {

  $rootScope.$on('$routeChangeSuccess', function () {

    var interval = setInterval(function(){
      if (document.readyState == 'complete') {
        $window.scrollTo(0, 0);
        clearInterval(interval);
      }
    }, 200);

  });
});

Put it in your bootstrap (usually called app.js).

It's a pure javascript solution (it's always better not to use jQuery if it's easy).

Explanation: The script checks every 200ms if the new DOM is fully loaded and then scrolls to the top and stops checking. I tried without this 200ms loop and it sometimes failed to scroll because the page was just not completely displayed.

edited Jun 01 '14 at 16:41

answered Jun 01 '14 at 16:35

Guilhem Soulas

1,975
2
18
30

I would like to add some more to your answear: First of all `$routeChangeSuccess` is fired only if you are using the default router, you could be listening also to `$viewContentLoaded` or `$stateChangeSuccess` if you have some kind of custom navigation, Also if you are minifing your code `.run(function($rootScope, $window) {` should be called like this: `.run([ "$rootScope", "$window",function($rootScope, $window) {` Both the issues took me quite some time to realize so i hope this helps others (you might want to update your answear with those info @guilhem) – Yuri Scarbaci Oct 01 '18 at 11:26

score 1 · Answer 3 · answered Jun 01 '14 at 15:52

It seems that you understand why the problem is happening based on @jarrodek's comment.

As for a solution, you could either follow @TongShen's solution of wrapping your function in a $timeout or you can put the function call within the partial that you're loading.

<!-- New partial-->
<div ng-init="scrollToTop()">

</div>

If you view change is fired after a click event, you could also put the function call on that element. Just comes down to timing though. Just depends on how things are set up.

angularJS doesn't scroll to top after changing a view

3 Answers3