Sliding view with angular ui-router and ng-animate auto scroll to targeted view

Question

I'm using AngularJS's ui-router and ngAnimate to create the classic sliding view in mobile.

I found that at the beginning of the transition when both view exist on the page, if the targeted view is out of the view port, it will jump to that view position first, which give us the funny effect like this:

plunker

Is there anyway to avoid this?

Answer 1

Well, usually Angular uses $anchorscroll to scroll to a new view. That can be disabled by calling .value('$anchorScroll', angular.noop) on your module, like this:

var app = angular.module('app', [
        'ui.router',
        'ngAnimate'
    ]).value('$anchorScroll', angular.noop);

However, UI-Router uses its own. I disabled that by telling UI-Router to use the (now disabled) $anchorScroll: $uiViewScrollProvider.useAnchorScroll();

Here is the updated plunker

Answer 2

Angular UI-Router recently updated it's app so that it automatically scrolls down to new views loaded by default. This was causing my app's pages to load scrolled down. To turn this off simply add the following attribute to your ui-view:

<div ui-view="header"  autoscroll="false"></div>