autoscroll issue
HTML
<script src="http://code.angularjs.org/1.2.1/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<div ng-app="main">
<div class="container">
<a href="#/link1">Link1</a>
<a href="#/link2">Link2</a>
</div>
<div class="ng-view" my-scroll></div>
<script type="text/ng-template" id="link1.html">
--------<br/>
---------------<br/>
----------------------<br/>
------------------------------<br/>
----------------------------------------<br/>
--------------------------------------------------<br/>
--------------------------------------------------------<br/>
--------------------------------------------------------<br/>
--------------------------------------------------<br/>
----------------------------------------<br/>
------------------------------<br/>
----------------------<br/>
---------------<br/>
--------<br/>
--------<br/>
---------------<br/>
----------------------<br/>
------------------------------<br/>
----------------------------------------<br/>
--------------------------------------------------<br/>
--------------------------------------------------------<br/>
--------------------------------------------------------<br/>
--------------------------------------------------<br/>
----------------------------------------<br/>
------------------------------<br/>
----------------------<br/>
---------------<br/>
--------<br/>
--------<br/>
---------------<br/>
----------------------<br/>
------------------------------<br/>
----------------------------------------<br/>
--------------------------------------------------<br/>
--------------------------------------------------------<br/>
...
CSS
.container {
position: fixed;
top: 0;
z-index: 1030;
background-color: #ddd;
}
.ng-view {
position: absolute;
top: 70px; right: 0; bottom: 0; left: 0;
text-align: center;
border: 1px solid black;
height: 1024px;
}
.ng-enter, .ng-leave {
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-o-transition: 0.7s;
transition: 0.7s;
position: absolute;
}
.ng-enter, .ng-leave.ng-leave-active {opacity: 0;}
.ng-leave, .ng-enter.ng-enter-active {opacity: 1;}
JavaScript
angular.module('main', ['ngRoute', 'ngAnimate'])
.config(function($routeProvider) {
$routeProvider
.when('/link1', {controller: '', templateUrl: 'link1.html'})
.when('/link2', {controller: '', templateUrl: 'link2.html'})
.otherwise({redirectTo: '/link1'});
})
.directive('myScroll', function($rootScope, $anchorScroll) {
return function(scope, element) {
$rootScope.$on('$routeChangeStart', function() {
$anchorScroll();
});
};
});