TN: Make main page scroll down to Vets when clicking on the link

This commit is contained in:
Nguyen Anh Tuan, Tony 2015-01-29 08:17:15 +08:00
parent e5379c1178
commit 2cbd654b77
3 changed files with 11 additions and 1 deletions

View file

@ -12,7 +12,7 @@
<div id="navbar" class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="#pets">Discover</a></li>
<li><a href="#vets">Veterinarians</a></li>
<li><a href="#" ng-click="scrollToVet()">Veterinarians</a></li>
<li><a href="#about">About</a></li>
</ul>
</div><!--/.navbar-collapse -->

View file

@ -4,6 +4,12 @@ var MainController = function($scope, $rootScope, $sce, $timeout, $location,
$scope.$route = $route;
$scope.$location = $location;
$scope.footerText = '© ' + new Date().getFullYear() + ' Pet Clinic, A Spring Framework Demonstration';
$scope.scrollToVet = function(){
$('html, body').animate({
scrollTop : $("#veterianarians").offset().top
}, 1000);
}
};
var MainControllerDeclaration = [ '$scope', '$rootScope', '$sce', '$timeout','$location', '$route', '$interval', '$cookieStore', '$window', MainController ];

View file

@ -54,6 +54,10 @@
<!-- ga('create','UA-XXXXX-X');ga('send','pageview'); -->
<!-- </script> -->
<!--<script src="http://code.jquery.com/jquery.js"></script>-->
<script src="plugins/jquery/jquery-2.1.0.min.js"></script>
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-route.js"></script>