<!DOChttps://plnkr.co/TYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-route@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Autoscroll AngularJS</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#/about">About</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1 class="text-center page-header">
Angular Autoscroll
</h1>
<h4 class="text-center"><small>Christian "iamrelos" Soler - <a href="http://github.com/iamrelos" target="_blank">Github</a></small></h4>
</div>
<!--AUTOSCROLL-->
<div ng-view autoscroll></div>
<footer class="container text-center">
<a href="#/">Home</a> | <a href="#/about">About</a>
</footer>
</body>
</html>
(function(){
'use strict';
angular.module('app', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeController',
controllerAs: 'vm'
}).when('/about', {
templateUrl: 'about.html',
controller: 'AboutController',
controllerAs: 'vm'
});
})
.controller('HomeController', function(DataServices){
var vm = this;
vm.content = DataServices.getData(9);
})
.controller('AboutController', function(DataServices){
var vm = this;
vm.content = DataServices.getData(4);
})
.factory('DataServices', function() {
return {
getData: function(sectionNumber){
var data = [];
for (var i =0; i <= sectionNumber; i++){
var section = {
title: "Section #" + (i+1),
content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, quaerat, debitis, molestiae, tempora provident quo unde aperiam non impedit cum quisquam possimus odio repellat. Totam, cum, quidem reiciendis ut in corrupti repellat at maxime saepe molestias excepturi voluptatibus officia repudiandae autem illo. Voluptas, eius, suscipit, ullam cum minima facere totam tenetur natus illo doloremque reiciendis expedita doloribus ex animi consequuntur labore aut ratione quasi velit ipsa voluptatem perferendis officiis quae error in id rerum sint iusto numquam fugit molestiae vel hic dignissimos dicta sapiente culpa placeat consectetur. Nemo, itaque, fugiat maiores accusantium necessitatibus praesentium blanditiis suscipit eum possimus unde non neque vel voluptates obcaecati nobis ad distinctio ab placeat fuga qui voluptate? Mollitia, architecto, repellendus expedita suscipit dolor reiciendis omnis dicta modi molestias voluptate id atque asperiores beatae. Magnam, dignissimos, a numquam rem maiores ratione esse atque placeat nesciunt eligendi vel hic veniam molestias accusantium voluptas. Minima, autem provident at mollitia alias ullam quisquam neque fugit consequuntur distinctio voluptate voluptas sunt laudantium minus natus itaque unde quo id magni labore tempora nostrum aliquam rem animi eius deserunt temporibus maxime a laboriosam repudiandae illo expedita dolore optio. Obcaecati, rem, deserunt, et libero reprehenderit quia velit odit facilis quas molestias accusantium veritatis nesciunt deleniti quo alias architecto perspiciatis enim mollitia voluptas ipsum blanditiis voluptatibus assumenda id sapiente quos esse tempore unde voluptate error harum? Quos, dolorem minus consectetur fugit quam aut delectus dicta cupiditate deserunt culpa soluta itaque tempore perspiciatis repellendus velit debitis minima non consequuntur voluptatum molestiae error hic quae facere dolores ducimus repudiandae quibusdam ea adipisci at dolor a voluptatem sit illum praesentium tempora maiores modi accusamus ullam qui commodi enim consequatur. Officiis, nesciunt, repellat aliquid itaque voluptas aut magnam repudiandae omnis distinctio expedita. Temporibus, aliquid atque nisi unde sapiente obcaecati quas vel incidunt facilis ratione excepturi earum maxime ipsa qui molestiae provident consequuntur vitae quisquam debitis totam a voluptatem est enim quam iure animi similique. Odio, nostrum, ipsa, ad, cumque ut repellat excepturi magnam consequuntur vitae perferendis minus natus similique officiis alias nesciunt sequi cum velit sit doloremque neque necessitatibus maxime fuga! Facere, quod, eaque, vero, iusto architecto hic optio eum eligendi quae iste perspiciatis vitae aspernatur amet necessitatibus dolores quidem similique? Obcaecati, ipsum, ratione quam libero dicta vero excepturi voluptas tempora possimus veniam nisi asperiores quos sed expedita quibusdam temporibus dolore consequuntur hic harum vitae eos. Impedit ullam quod molestiae nisi iure natus voluptatem fugit fugiat qui inventore. Adipisci, vel, accusantium, reprehenderit maxime quod enim harum recusandae sit velit repudiandae expedita natus quo fugit est quibusdam laborum nesciunt blanditiis beatae ea dolore impedit consectetur a cum tenetur reiciendis aspernatur tempora ad ut illo culpa! Mollitia, atque itaque necessitatibus recusandae animi voluptatum ipsam nam aut voluptate odit dolorem harum sit quis corporis eum. Praesentium, unde, dignissimos, harum, officia numquam similique nulla ea dolorem quas itaque voluptas quaerat quos. Maxime, architecto, magnam cumque nihil quo sed corporis expedita facere aliquam voluptas ipsum perspiciatis sit cum delectus ab labore libero modi. Sequi, beatae, possimus quo voluptatibus distinctio assumenda harum illo maxime!"
};
data.push(section);
}
return data;
}
}
});
})();
.section-odd {
background-color: #f1f1f1;
}
.section-even {
background-color: #121212;
color: white;
}
.section-odd, .section-even, footer {
padding: 30px 0;
}
.section-odd h4, .section-even h4 {
font-size: 30px;
color: #777;
}
<div>
<h1 class="text-center">Home</h1>
<br>
<div ng-class-even="'section-odd'" ng-class-odd="'section-even'" ng-repeat="mess in vm.content">
<div class="container">
<h4>{{mess.title}}</h4>
<p>{{mess.content}}</p>
</div>
</div>
</div>
<div>
<h1 class="text-center">About</h1>
<br>
<div ng-class-even="'section-odd'" ng-class-odd="'section-even'" ng-repeat="mess in vm.content">
<div class="container">
<h4>{{mess.title}}</h4>
<p>{{mess.content}}</p>
</div>
</div>
</div>