Angular JS - UI Routing - the script always scrolls down to the injection but I want them to see the whole page?

Question

I am using a bootstrap template and I tried to implement Angular JS with ui.routing The injection and navigation itself works fine... only my header includes a slider and the text is injected below. So every time someone access the route domain, he will by default get the home route; but after loading the site it automatically scrolls down to the injection part and the user does not see the header and the slider. How can I change that?

Here is part of my html code:

<header ng-include="'templates/header.html'"></header>
<div class="container"> 
<div class="row" >
    <div ui-view></div>
</div>
<footer ng-include="'templates/footer.html'"></footer>

and here is my app.js

angular
.module('myApp', ['ui.router'])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('home',{
            url: '/',
            templateUrl: 'templates/home.html'
        })
        .state('about',{
            url: '/about',
            templateUrl: 'templates/about.html'
        })
        .state('contact',{
            url: '/contact',
            template: 'CONTACT'
        })
}])

Answer 1

You should use autoscroll="false" setting:

• http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-view

Example:

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

A cite:

autoscroll(optional) – {string=} – It allows you to set the scroll behavior of the browser window when a view is populated.

And also few examples from doc:

<!-- If autoscroll present with no expression,
then scroll ui-view into view -->
<ui-view autoscroll/>

<!-- If autoscroll present with valid expression,
then scroll ui-view into view if expression evaluates to true -->
<ui-view autoscroll='true'/>
<ui-view autoscroll='false'/>
<ui-view autoscroll='scopeVariable'/>