Animations when navigation items are clicked

Question

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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

//------------One page item (there are 5)---------------//
<div class="over">
    <div class="container">
        <a name="over_anchor"/>
        <div class="frame">
            <h3>over</h3>
        </div>
    </div>
</div>

//------------Fullscreen menu overlay ------------------//
<div class="overlay overlay-data">
    <div class="container">
        <div class="frame">
            <div class="kolom-1">
                <button type="button" class="overlay-close">Close</button>
            </div>
            <div class="kolom-3">
            </div>
            <div class="kolom-3">
            </div>
            <div class="kolom-3">
                <nav>
                    <ul>
                        <li><a href="#" id="homelink">home</a></li>
                        <li><a href="#" id="overlink">over</a></li>
                        <li><a href="#" id="daglink">een dag bij</a></li>
                        <li><a href="#" id="werkzaamhedenlink">werkzaamheden</a>  </li>
                        <li><a href="#" id="contactlink">contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

Answer 1

Consider what you would do if JavaScript were unavailable. You would probably have more semantic markup, with a menu like this:

<nav>
    <ul>
        <li><a href="#home">home</a></li>
        <li><a href="#over">over</a></li>
        <li><a href="#dag">een dag bij</a></li>
        <li><a href="#werkzaamheden">werkzaamheden</a>  </li>
        <li><a href="#contact">contact</a></li>
    </ul>
</nav>

and page items like this:

<!-- ----------One page item (there are 5)------------- -->
<div id="over">
    <div class="container">
        <div class="frame">
            <h3>over</h3>
        </div>
    </div>
</div>

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 > ul > li > a").bind("click", function() {
    scrollTo($(this).attr('href'));
    $(".overlay").removeClass('overlay-open');
    $("#overlay-menu").fadeIn(800);
});