Smooth javascript navigation stops working after first click

Smooth javascript navigation stops working after first click

This webpage http://www.eboxlab.net/ has a menu on the left side. What I
need to achieve is to be able to go to a page section when the respective
menu option is pressed. Here is my code (pretty sure it's quite bad, but I
will clean it up later, after I make it work):
navigateMe();
navInit = 1;
navNext = 2;
function navigateMe() {
step = jQuery('ul#navigation li').size();
looper = setInterval(function(){
if(navNext > step + 1) {
navInit = 1;
navNext = 1;
}
var refLink = jQuery('ul#navigation li:nth-child(' + navInit + ')
a').attr('href').replace('#', '');
var divLink = jQuery("div[id='" + refLink + "']").offset().top;
jQuery('ul#navigation li:nth-child(' + navInit + ') a').on('click',
function() {
jQuery('html, body').animate({
scrollTop: divLink
}, 500);
});
navInit = navNext;
navNext = navNext + 1;
}, 0);
}
However the problem is that it only works once. After you click menu once,
it doesn't slide up or down anymore. Please tell me what's wrong with it.
Many thanks in advance.