Maquette scrollTo

HTML

<link rel="stylesheet" href="http://pepitodanger.free.fr/Maquette/css/owl.carousel.css">
<link rel="stylesheet" href="http://pepitodanger.free.fr/Maquette/css/snap.css">
<link rel="stylesheet" href="http://pepitodanger.free.fr/Maquette/css/layout.css">
<script src="http://pepitodanger.free.fr/Maquette/js/snap.min.js"></script>
<script src="http://pepitodanger.free.fr/Maquette/js/owl.carousel.js"></script>
<script src="http://pepitodanger.free.fr/scrollit/js/script.js"></script>
<nav id="menu">
    <ul class="navbar">
        <li><a href="#home" class="current"></a></li>
        <li><a href="#presentation"></a></li>
        <li><a href="#benefits"></a></li>
        <li><a href="#contact"></a></li>
    </ul>
</nav>
<div id="page" class="snap-content layout">
    <section id="home">
        <div class="w960p">
            <header id="header">
                <img class="logo" src="http://pepitodanger.free.fr/Maquette/images/logo.png" alt="Logo">
                <img id="btn-clients" class="icon-client-area rollover" src="http://pepitodanger.free.fr/Maquette/images/client-area-normal.png" alt="Icon client area">
            </header>
            <div id="main">	<a href="#" id="open-left"><div id="div-home">
					<div id="div-home-content" class="center-middle">
						<h2 class="exemple-title">Bullet 1</h2>
					</div>
				</div></a>	
                <div id="div-client-area">
                    <div id="div-client-area-content" class="center-middle">
                        	<h2 class="exemple-title">Div client area</h2>

                    </div>
                </div>
            </div>
            <footer id="footer">
                	<h2 class="div-footer">Footer</h2>

            </footer>
        </div>
    </section>
    <section id="content">
        <div id="background-01">
            <p class="bg">Background</p>
        </div>
        <article id="presentation" class="layout">
            <div class="w960p">
                	<h2...

CSS

#menu {
    position: fixed;
    height: 116px;
    /* 60px d'espace entre li à rajouter' */
    width: 40px;
    left: 0;
    top: 0;
    bottom: 0;
    padding-left: 10px;
    margin: auto;
    z-index: 9999;
}
#menu a {
    display: block;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    margin: 10px;
    background-color: #9fa5a7;
    z-index: 9999;
}
#menu a:hover {
    background-color: #15abd2;
    cursor: pointer;
}
.current {
    background-color: #15abd2 !important;
}

JavaScript

// BULLET MENU
$(function(){

	var sections = [];
	var id = false;
	var $navbar = $('.navbar');
	var $navbara = $('a', $navbar);
	
	$navbara.click(function(e){
		$('#page').animate({
			scrollTop: $($(this).attr('href')).offset().top
		});
	});

	$navbara.each(function(){
		sections.push($($(this).attr('href')));
	});
	
	$('#page').scroll(function(e){
		var scrollTop = $(this).scrollTop() + ($('#page').height() / 2)
		for(var i in sections){
			var section = sections[i];
			if (scrollTop > section.offset().top) {
				scrolled_id = section.attr('id');
			}
		}
		if (scrolled_id !== id) {
			id = scrolled_id
			$navbara.removeClass('current');
			$('a[href="#' + id + '"]', $navbar).addClass('current');
		}
	});

});