Animations when navigation items are clicked
Consider what you would do if JavaScript were unavailable.  You would probably have more semantic markup, with a menu like this:

&lt;nav&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#home"&gt;home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#over"&gt;over&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#dag"&gt;een dag bij&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#werkzaamheden"&gt;werkzaamheden&lt;/a&gt;  &lt;/li&gt;
        &lt;li&gt;&lt;a href="#contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;


and page items like this:

&lt;!-- ----------One page item (there are 5)------------- --&gt;
&lt;div id="over"&gt;
    &lt;div class="container"&gt;
        &lt;div class="frame"&gt;
            &lt;h3&gt;over&lt;/h3&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


such that clicking on a menu item would scroll to the relevant page item.

Then, it's just a matter of using jQuery to intercept that click and replace the behaviour with a more polished animation.

function scrollTo(selector) {
    var destination = $(selector);
    $('html, body').animate({scrollTop: destination.offset().top}, 'slow');
}

$("nav &gt; ul &gt; li &gt; a").bind("click", function() {
    scrollTo($(this).attr('href'));
    $(".overlay").removeClass('overlay-open');
    $("#overlay-menu").fadeIn(800);
});