Animations when navigation items are clicked I'm a beginner in jQuery and am wondering how I could write the following code shorter, since I'm repeating a lot.

Working example



//-----------Fullscreen overlay menu click events -----//

$('#overlay-menu').bind("click", function() {
    $(".overlay").addClass('overlay-open');
    $("#overlay-menu").fadeOut(800);
});

$(".overlay-close").bind("click", function() {
    $(".overlay").removeClass('overlay-open');
    $("#overlay-menu").fadeIn(800);
});

//------------ Scroll function-------//

function scrollToAnchor(linkID) {
    var linkName = $("a[name='"+ linkID +"']");
    $('html, body').animate({scrollTop: linkName.offset().top}, 'slow');
}

//------------- the repeating part --------------------------------//

$("#homelink").bind("click", function() {
    scrollToAnchor('home_anchor');
    $(".overlay").removeClass('overlay-open');
    $("#overlay-menu").fadeIn(800);
});

$("#overlink").bind("click", function() {
    scrollToAnchor('over_anchor');
    $(".overlay").removeClass('overlay-open');
    $("#overlay-menu").fadeIn(800);
});

$("#daglink").bind("click", function() {
    scrollToAnchor('dag_anchor');
    $(".overlay").removeClass('overlay-open');
    $("#overlay-menu").fadeIn(800);
});

$("#werkzaamhedenlink").bind("click", function() {
    scrollToAnchor('werkzaamheden_anchor');
    $(".overlay").removeClass('overlay-open');
    $("#overlay-menu").fadeIn(800);
});

$("#contactlink").bind("click", function() {
    scrollToAnchor('contact_anchor');
    $(".overlay").removeClass('overlay-open');
    $("#overlay-menu").fadeIn(800);
});
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

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

//------------Fullscreen menu overlay ------------------//
&lt;div class="overlay overlay-data"&gt;
    &lt;div class="container"&gt;
        &lt;div class="frame"&gt;
            &lt;div class="kolom-1"&gt;
                &lt;button type="button" class="overlay-close"&gt;Close&lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="kolom-3"&gt;
            &lt;/div&gt;
            &lt;div class="kolom-3"&gt;
            &lt;/div&gt;
            &lt;div class="kolom-3"&gt;
                &lt;nav&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#" id="homelink"&gt;home&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#" id="overlink"&gt;over&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#" id="daglink"&gt;een dag bij&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#" id="werkzaamhedenlink"&gt;werkzaamheden&lt;/a&gt;  &lt;/li&gt;
                        &lt;li&gt;&lt;a href="#" id="contactlink"&gt;contact&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
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);
});