<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/twitter/bootstrap/master/docs/assets/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="AppCtrl">
<ul class="nav nav-pills">
<li><a href="#" s-ref="#the-office" scroll-to="klk">Office</a>
</li>
<li><a href="#" s-ref="#the-team" scroll-to>Team</a>
</li>
<li><a href="#" s-ref="#about" scroll-to>About</a>
</li>
<li><a href="#" s-ref="#other" scroll-to>Other</a>
</li>
</ul>
<div class="container">
<div class="row" id="about">
<div class="col-md-12">
<div style="padding:40px;background:#eeeeee;">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet vehicula turpis, vitae sollicitudin leo. Praesent a auctor libero, vitae mollis nulla. Ut purus urna, consectetur at nisi et, pretium viverra ligula. Curabitur accumsan
laoreet dictum. Mauris non rhoncus ligula. Vestibulum porttitor leo enim, id molestie dolor placerat at. Sed ut dapibus dolor. Sed sit amet rhoncus metus, in bibendum ante. Etiam sagittis efficitur libero a hendrerit.</p>
<p>Sed non est vitae diam molestie porta nec nec nulla. Integer dictum bibendum nunc. Sed dolor enim, blandit non massa id, semper aliquam neque. Donec tincidunt tortor vel leo accumsan, non faucibus urna blandit. Praesent id neque finibus, feugiat
risus non, faucibus magna. Duis accumsan rhoncus nibh vitae feugiat. Fusce aliquam dui sed finibus ultricies. Ut ac fringilla sem. Vivamus lacinia, lorem in cursus rutrum, risus augue condimentum nulla, quis aliquam dolor dui vitae nulla.
Nam porta pretium felis sit amet congue. Phasellus non leo sit amet velit mattis vulputate. Aliquam erat volutpat. Aliquam erat volutpat. Nulla pretium erat vitae elit laoreet posuere. Aenean pellentesque justo quam, id vehicula nibh vulputate
efficitur. Pellentesque dapibus felis lobortis dictum suscipit.</p>
<p>Proin vehicula nisi sit amet sem eleifend, sit amet ornare orci viverra. Proin egestas risus nec elementum mollis. Nunc eget bibendum lacus. Nulla est leo, pulvinar eget ipsum sed, porta aliquam ante. Integer eu lorem a sem laoreet hendrerit.
Nam eleifend luctus erat et fringilla. Integer rhoncus pretium neque ornare fringilla. Curabitur quis semper dui. Proin gravida pulvinar placerat. Donec id velit purus. Proin tempor, urna fermentum scelerisque sollicitudin, augue enim egestas
est, tempor pulvinar tellus purus vitae ante. In hac habitasse platea dictumst. Aenean ornare, mi id venenatis semper, mi quam ornare magna, nec ultrices nulla velit id dolor. Nulla facilisi.</p>
<p>Vestibulum tempus posuere iaculis. Nulla et nunc justo. Phasellus quis diam justo. Aenean molestie dolor nec vulputate molestie. Suspendisse ac velit vel nunc facilisis elementum. Ut quam nisl, auctor quis mauris eu, ultricies condimentum purus.
Vivamus sollicitudin scelerisque justo ut iaculis.</p>
<p>Nam eu molestie eros, eget pretium lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non sem at justo commodo cursus nec et est. Quisque volutpat nunc vel placerat efficitur. Praesent quis euismod tellus. Nulla vel dolor consectetur,
pulvinar erat ac, consectetur leo. Vestibulum vehicula auctor neque, a fermentum nulla blandit eu. Praesent imperdiet, lorem eu molestie semper, metus elit scelerisque nisl, in aliquet quam lorem ac arcu. Sed felis libero, volutpat eget maximus
at, sollicitudin vitae risus. Quisque tempor gravida odio et pretium. Nulla nec vestibulum libero, vel convallis diam. Phasellus volutpat ultricies odio, at maximus ipsum.</p>
<p>Proin vehicula nisi sit amet sem eleifend, sit amet ornare orci viverra. Proin egestas risus nec elementum mollis. Nunc eget bibendum lacus. Nulla est leo, pulvinar eget ipsum sed, porta aliquam ante. Integer eu lorem a sem laoreet hendrerit.
Nam eleifend luctus erat et fringilla. Integer rhoncus pretium neque ornare fringilla. Curabitur quis semper dui. Proin gravida pulvinar placerat. Donec id velit purus. Proin tempor, urna fermentum scelerisque sollicitudin, augue enim egestas
est, tempor pulvinar tellus purus vitae ante. In hac habitasse platea dictumst. Aenean ornare, mi id venenatis semper, mi quam ornare magna, nec ultrices nulla velit id dolor. Nulla facilisi.</p>
<p>Vestibulum tempus posuere iaculis. Nulla et nunc justo. Phasellus quis diam justo. Aenean molestie dolor nec vulputate molestie. Suspendisse ac velit vel nunc facilisis elementum. Ut quam nisl, auctor quis mauris eu, ultricies condimentum purus.
Vivamus sollicitudin scelerisque justo ut iaculis.</p>
<p>Nam eu molestie eros, eget pretium lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non sem at justo commodo cursus nec et est. Quisque volutpat nunc vel placerat efficitur. Praesent quis euismod tellus. Nulla vel dolor consectetur,
pulvinar erat ac, consectetur leo. Vestibulum vehicula auctor neque, a fermentum nulla blandit eu. Praesent imperdiet, lorem eu molestie semper, metus elit scelerisque nisl, in aliquet quam lorem ac arcu. Sed felis libero, volutpat eget maximus
at, sollicitudin vitae risus. Quisque tempor gravida odio et pretium. Nulla nec vestibulum libero, vel convallis diam. Phasellus volutpat ultricies odio, at maximus ipsum.</p>
</div>
</div>
</div>
<div class="row" id="the-team">
<div class="col-md-12">
<div style="padding:40px;background:#eeeeee;">
<h2>The Team</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet vehicula turpis, vitae sollicitudin leo. Praesent a auctor libero, vitae mollis nulla. Ut purus urna, consectetur at nisi et, pretium viverra ligula. Curabitur accumsan
laoreet dictum. Mauris non rhoncus ligula. Vestibulum porttitor leo enim, id molestie dolor placerat at. Sed ut dapibus dolor. Sed sit amet rhoncus metus, in bibendum ante. Etiam sagittis efficitur libero a hendrerit.</p>
<p>Sed non est vitae diam molestie porta nec nec nulla. Integer dictum bibendum nunc. Sed dolor enim, blandit non massa id, semper aliquam neque. Donec tincidunt tortor vel leo accumsan, non faucibus urna blandit. Praesent id neque finibus, feugiat
risus non, faucibus magna. Duis accumsan rhoncus nibh vitae feugiat. Fusce aliquam dui sed finibus ultricies. Ut ac fringilla sem. Vivamus lacinia, lorem in cursus rutrum, risus augue condimentum nulla, quis aliquam dolor dui vitae nulla.
Nam porta pretium felis sit amet congue. Phasellus non leo sit amet velit mattis vulputate. Aliquam erat volutpat. Aliquam erat volutpat. Nulla pretium erat vitae elit laoreet posuere. Aenean pellentesque justo quam, id vehicula nibh vulputate
efficitur. Pellentesque dapibus felis lobortis dictum suscipit.</p>
<p>Proin vehicula nisi sit amet sem eleifend, sit amet ornare orci viverra. Proin egestas risus nec elementum mollis. Nunc eget bibendum lacus. Nulla est leo, pulvinar eget ipsum sed, porta aliquam ante. Integer eu lorem a sem laoreet hendrerit.
Nam eleifend luctus erat et fringilla. Integer rhoncus pretium neque ornare fringilla. Curabitur quis semper dui. Proin gravida pulvinar placerat. Donec id velit purus. Proin tempor, urna fermentum scelerisque sollicitudin, augue enim egestas
est, tempor pulvinar tellus purus vitae ante. In hac habitasse platea dictumst. Aenean ornare, mi id venenatis semper, mi quam ornare magna, nec ultrices nulla velit id dolor. Nulla facilisi.</p>
<p>Vestibulum tempus posuere iaculis. Nulla et nunc justo. Phasellus quis diam justo. Aenean molestie dolor nec vulputate molestie. Suspendisse ac velit vel nunc facilisis elementum. Ut quam nisl, auctor quis mauris eu, ultricies condimentum purus.
Vivamus sollicitudin scelerisque justo ut iaculis.</p>
<p>Nam eu molestie eros, eget pretium lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non sem at justo commodo cursus nec et est. Quisque volutpat nunc vel placerat efficitur. Praesent quis euismod tellus. Nulla vel dolor consectetur,
pulvinar erat ac, consectetur leo. Vestibulum vehicula auctor neque, a fermentum nulla blandit eu. Praesent imperdiet, lorem eu molestie semper, metus elit scelerisque nisl, in aliquet quam lorem ac arcu. Sed felis libero, volutpat eget maximus
at, sollicitudin vitae risus. Quisque tempor gravida odio et pretium. Nulla nec vestibulum libero, vel convallis diam. Phasellus volutpat ultricies odio, at maximus ipsum.</p>
<p>Proin vehicula nisi sit amet sem eleifend, sit amet ornare orci viverra. Proin egestas risus nec elementum mollis. Nunc eget bibendum lacus. Nulla est leo, pulvinar eget ipsum sed, porta aliquam ante. Integer eu lorem a sem laoreet hendrerit.
Nam eleifend luctus erat et fringilla. Integer rhoncus pretium neque ornare fringilla. Curabitur quis semper dui. Proin gravida pulvinar placerat. Donec id velit purus. Proin tempor, urna fermentum scelerisque sollicitudin, augue enim egestas
est, tempor pulvinar tellus purus vitae ante. In hac habitasse platea dictumst. Aenean ornare, mi id venenatis semper, mi quam ornare magna, nec ultrices nulla velit id dolor. Nulla facilisi.</p>
<p>Vestibulum tempus posuere iaculis. Nulla et nunc justo. Phasellus quis diam justo. Aenean molestie dolor nec vulputate molestie. Suspendisse ac velit vel nunc facilisis elementum. Ut quam nisl, auctor quis mauris eu, ultricies condimentum purus.
Vivamus sollicitudin scelerisque justo ut iaculis.</p>
<p>Nam eu molestie eros, eget pretium lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non sem at justo commodo cursus nec et est. Quisque volutpat nunc vel placerat efficitur. Praesent quis euismod tellus. Nulla vel dolor consectetur,
pulvinar erat ac, consectetur leo. Vestibulum vehicula auctor neque, a fermentum nulla blandit eu. Praesent imperdiet, lorem eu molestie semper, metus elit scelerisque nisl, in aliquet quam lorem ac arcu. Sed felis libero, volutpat eget maximus
at, sollicitudin vitae risus. Quisque tempor gravida odio et pretium. Nulla nec vestibulum libero, vel convallis diam. Phasellus volutpat ultricies odio, at maximus ipsum.</p>
</div>
</div>
</div>
<div class="row" id="the-office">
<div class="col-md-12">
<div style="padding:40px;background:#eeeeee;">
<h2>The Office</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet vehicula turpis, vitae sollicitudin leo. Praesent a auctor libero, vitae mollis nulla. Ut purus urna, consectetur at nisi et, pretium viverra ligula. Curabitur accumsan
laoreet dictum. Mauris non rhoncus ligula. Vestibulum porttitor leo enim, id molestie dolor placerat at. Sed ut dapibus dolor. Sed sit amet rhoncus metus, in bibendum ante. Etiam sagittis efficitur libero a hendrerit.</p>
<p>Sed non est vitae diam molestie porta nec nec nulla. Integer dictum bibendum nunc. Sed dolor enim, blandit non massa id, semper aliquam neque. Donec tincidunt tortor vel leo accumsan, non faucibus urna blandit. Praesent id neque finibus, feugiat
risus non, faucibus magna. Duis accumsan rhoncus nibh vitae feugiat. Fusce aliquam dui sed finibus ultricies. Ut ac fringilla sem. Vivamus lacinia, lorem in cursus rutrum, risus augue condimentum nulla, quis aliquam dolor dui vitae nulla.
Nam porta pretium felis sit amet congue. Phasellus non leo sit amet velit mattis vulputate. Aliquam erat volutpat. Aliquam erat volutpat. Nulla pretium erat vitae elit laoreet posuere. Aenean pellentesque justo quam, id vehicula nibh vulputate
efficitur. Pellentesque dapibus felis lobortis dictum suscipit.</p>
<p>Proin vehicula nisi sit amet sem eleifend, sit amet ornare orci viverra. Proin egestas risus nec elementum mollis. Nunc eget bibendum lacus. Nulla est leo, pulvinar eget ipsum sed, porta aliquam ante. Integer eu lorem a sem laoreet hendrerit.
Nam eleifend luctus erat et fringilla. Integer rhoncus pretium neque ornare fringilla. Curabitur quis semper dui. Proin gravida pulvinar placerat. Donec id velit purus. Proin tempor, urna fermentum scelerisque sollicitudin, augue enim egestas
est, tempor pulvinar tellus purus vitae ante. In hac habitasse platea dictumst. Aenean ornare, mi id venenatis semper, mi quam ornare magna, nec ultrices nulla velit id dolor. Nulla facilisi.</p>
<p>Vestibulum tempus posuere iaculis. Nulla et nunc justo. Phasellus quis diam justo. Aenean molestie dolor nec vulputate molestie. Suspendisse ac velit vel nunc facilisis elementum. Ut quam nisl, auctor quis mauris eu, ultricies condimentum purus.
Vivamus sollicitudin scelerisque justo ut iaculis.</p>
<p>Nam eu molestie eros, eget pretium lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non sem at justo commodo cursus nec et est. Quisque volutpat nunc vel placerat efficitur. Praesent quis euismod tellus. Nulla vel dolor consectetur,
pulvinar erat ac, consectetur leo. Vestibulum vehicula auctor neque, a fermentum nulla blandit eu. Praesent imperdiet, lorem eu molestie semper, metus elit scelerisque nisl, in aliquet quam lorem ac arcu. Sed felis libero, volutpat eget maximus
at, sollicitudin vitae risus. Quisque tempor gravida odio et pretium. Nulla nec vestibulum libero, vel convallis diam. Phasellus volutpat ultricies odio, at maximus ipsum.</p>
<p>Proin vehicula nisi sit amet sem eleifend, sit amet ornare orci viverra. Proin egestas risus nec elementum mollis. Nunc eget bibendum lacus. Nulla est leo, pulvinar eget ipsum sed, porta aliquam ante. Integer eu lorem a sem laoreet hendrerit.
Nam eleifend luctus erat et fringilla. Integer rhoncus pretium neque ornare fringilla. Curabitur quis semper dui. Proin gravida pulvinar placerat. Donec id velit purus. Proin tempor, urna fermentum scelerisque sollicitudin, augue enim egestas
est, tempor pulvinar tellus purus vitae ante. In hac habitasse platea dictumst. Aenean ornare, mi id venenatis semper, mi quam ornare magna, nec ultrices nulla velit id dolor. Nulla facilisi.</p>
<p>Vestibulum tempus posuere iaculis. Nulla et nunc justo. Phasellus quis diam justo. Aenean molestie dolor nec vulputate molestie. Suspendisse ac velit vel nunc facilisis elementum. Ut quam nisl, auctor quis mauris eu, ultricies condimentum purus.
Vivamus sollicitudin scelerisque justo ut iaculis.</p>
<p>Nam eu molestie eros, eget pretium lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non sem at justo commodo cursus nec et est. Quisque volutpat nunc vel placerat efficitur. Praesent quis euismod tellus. Nulla vel dolor consectetur,
pulvinar erat ac, consectetur leo. Vestibulum vehicula auctor neque, a fermentum nulla blandit eu. Praesent imperdiet, lorem eu molestie semper, metus elit scelerisque nisl, in aliquet quam lorem ac arcu. Sed felis libero, volutpat eget maximus
at, sollicitudin vitae risus. Quisque tempor gravida odio et pretium. Nulla nec vestibulum libero, vel convallis diam. Phasellus volutpat ultricies odio, at maximus ipsum.</p>
</div>
</div>
</div>
<div class="row" id="other">
<div class="col-md-12">
<div style="padding:40px;background:#eeeeee;">
<h2>Other</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet vehicula turpis, vitae sollicitudin leo. Praesent a auctor libero, vitae mollis nulla. Ut purus urna, consectetur at nisi et, pretium viverra ligula. Curabitur accumsan
laoreet dictum. Mauris non rhoncus ligula. Vestibulum porttitor leo enim, id molestie dolor placerat at. Sed ut dapibus dolor. Sed sit amet rhoncus metus, in bibendum ante. Etiam sagittis efficitur libero a hendrerit.</p>
<p>Sed non est vitae diam molestie porta nec nec nulla. Integer dictum bibendum nunc. Sed dolor enim, blandit non massa id, semper aliquam neque. Donec tincidunt tortor vel leo accumsan, non faucibus urna blandit. Praesent id neque finibus, feugiat
risus non, faucibus magna. Duis accumsan rhoncus nibh vitae feugiat. Fusce aliquam dui sed finibus ultricies. Ut ac fringilla sem. Vivamus lacinia, lorem in cursus rutrum, risus augue condimentum nulla, quis aliquam dolor dui vitae nulla.
Nam porta pretium felis sit amet congue. Phasellus non leo sit amet velit mattis vulputate. Aliquam erat volutpat. Aliquam erat volutpat. Nulla pretium erat vitae elit laoreet posuere. Aenean pellentesque justo quam, id vehicula nibh vulputate
efficitur. Pellentesque dapibus felis lobortis dictum suscipit.</p>
<p>Proin vehicula nisi sit amet sem eleifend, sit amet ornare orci viverra. Proin egestas risus nec elementum mollis. Nunc eget bibendum lacus. Nulla est leo, pulvinar eget ipsum sed, porta aliquam ante. Integer eu lorem a sem laoreet hendrerit.
Nam eleifend luctus erat et fringilla. Integer rhoncus pretium neque ornare fringilla. Curabitur quis semper dui. Proin gravida pulvinar placerat. Donec id velit purus. Proin tempor, urna fermentum scelerisque sollicitudin, augue enim egestas
est, tempor pulvinar tellus purus vitae ante. In hac habitasse platea dictumst. Aenean ornare, mi id venenatis semper, mi quam ornare magna, nec ultrices nulla velit id dolor. Nulla facilisi.</p>
<p>Vestibulum tempus posuere iaculis. Nulla et nunc justo. Phasellus quis diam justo. Aenean molestie dolor nec vulputate molestie. Suspendisse ac velit vel nunc facilisis elementum. Ut quam nisl, auctor quis mauris eu, ultricies condimentum purus.
Vivamus sollicitudin scelerisque justo ut iaculis.</p>
<p>Nam eu molestie eros, eget pretium lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non sem at justo commodo cursus nec et est. Quisque volutpat nunc vel placerat efficitur. Praesent quis euismod tellus. Nulla vel dolor consectetur,
pulvinar erat ac, consectetur leo. Vestibulum vehicula auctor neque, a fermentum nulla blandit eu. Praesent imperdiet, lorem eu molestie semper, metus elit scelerisque nisl, in aliquet quam lorem ac arcu. Sed felis libero, volutpat eget maximus
at, sollicitudin vitae risus. Quisque tempor gravida odio et pretium. Nulla nec vestibulum libero, vel convallis diam. Phasellus volutpat ultricies odio, at maximus ipsum.</p>
<p>Proin vehicula nisi sit amet sem eleifend, sit amet ornare orci viverra. Proin egestas risus nec elementum mollis. Nunc eget bibendum lacus. Nulla est leo, pulvinar eget ipsum sed, porta aliquam ante. Integer eu lorem a sem laoreet hendrerit.
Nam eleifend luctus erat et fringilla. Integer rhoncus pretium neque ornare fringilla. Curabitur quis semper dui. Proin gravida pulvinar placerat. Donec id velit purus. Proin tempor, urna fermentum scelerisque sollicitudin, augue enim egestas
est, tempor pulvinar tellus purus vitae ante. In hac habitasse platea dictumst. Aenean ornare, mi id venenatis semper, mi quam ornare magna, nec ultrices nulla velit id dolor. Nulla facilisi.</p>
<p>Vestibulum tempus posuere iaculis. Nulla et nunc justo. Phasellus quis diam justo. Aenean molestie dolor nec vulputate molestie. Suspendisse ac velit vel nunc facilisis elementum. Ut quam nisl, auctor quis mauris eu, ultricies condimentum purus.
Vivamus sollicitudin scelerisque justo ut iaculis.</p>
<p>Nam eu molestie eros, eget pretium lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non sem at justo commodo cursus nec et est. Quisque volutpat nunc vel placerat efficitur. Praesent quis euismod tellus. Nulla vel dolor consectetur,
pulvinar erat ac, consectetur leo. Vestibulum vehicula auctor neque, a fermentum nulla blandit eu. Praesent imperdiet, lorem eu molestie semper, metus elit scelerisque nisl, in aliquet quam lorem ac arcu. Sed felis libero, volutpat eget maximus
at, sollicitudin vitae risus. Quisque tempor gravida odio et pretium. Nulla nec vestibulum libero, vel convallis diam. Phasellus volutpat ultricies odio, at maximus ipsum.</p>
</div>
</div>
</div>
</div>
</body>
</html>
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
background: #FAFAFA;
border-top: solid 1px #D5D5D5;
z-index: 11111;
}
console.clear();
var app = angular.module('app', []);
app.controller("AppCtrl", function($scope) {
});
app.directive('scrollTo', function() {
return {
link: function(scope, element, attrs) {
element.bind('click', function() {
var divPosition = $(attrs.sRef).offset();
$('html, body').animate({
scrollTop: divPosition.top
}, "slow");
});
}
};
});