JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/0.10.5/angular-0.10.5.min.js"></script>
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.3.1-min.js"></script>
<div ng-app='myapp'>
<div class="performance-zone">
<div class="navigation">
<ul>
<li class="first active">
<a href="#/performance" class="performance" eat-click>Leistungen</a>
</li>
<li>
<a href="#/references" class="references" eat-click>Referenzen</a>
</li>
<li>
<a href="#/about" class="about" eat-click>Über uns</a>
</li>
<li class="last">
<a href="#/contact" class="contact" eat-click>Kontakt</a>
</li>
</ul>
<div class="clearer"></div>
</div>
<div class="title">
<h3>Title 1</h3>
</div>
<div class="content">
</div>
<div class="guide">
<a href="#/references" title="Zu unseren Referenzen" class="references" eat-click>Unsere Referenzen</a>
</div>
</div>
<div class="references-zone">
<div class="navigation">
<ul>
<li class="first">
<a href="#/performance" class="performance" eat-click>Leistungen</a>
</li>
<li class="active">
<a href="#/references" class="references" eat-click>Referenzen</a>
</li>
<li>
<a href="#/about" class="about" eat-click>Über uns</a>
</li>
<li class="last">
<a href="#/contact" class="contact" eat-click>Kontakt</a>
</li>
...
CSS
.performance-zone{
height:600px;
}
.references-zone{
height:600px;
}
.about-zone{
height:600px;
}
JavaScript
var slidetime = 2000;
var easingmethod = 'easeInOutQuart';
var app = angular.module('myapp', []);
app.config(function($routeProvider) {
$routeProvider.when('/performance', {
controller: 'PerformanceController',
template: ' '
})
.when('/references', {
controller: 'ReferencesController',
template: ' '
})
.when('/about', {
controller: 'AboutController',
template: ' '
})
.otherwise({
controller: 'TopController',
template: ' '
});
});
app.controller('PerformanceController', function($scope, $routeParams) {
$.scrollTo( '.performance-zone', slidetime, {easing:easingmethod, axis: 'y'} );
});
app.controller('ReferencesController', function($scope, $routeParams) {
$.scrollTo( '.references-zone', slidetime, {easing:easingmethod, axis: 'y'} );
});
app.controller('AboutController', function($scope, $routeParams) {
$.scrollTo( '.about-zone', slidetime, {easing:easingmethod, axis: 'y'} );
});
app.controller('TopController', function($scope, $routeParams) {
$.scrollTo( '#logo', slidetime, {easing:easingmethod, axis: 'y'} );
});