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

• Julia: Thank you for your answer. It's not working for me though. I don't really get this line: scrollTo($(this).attr('href')); If I click a menu item, this goes at the end of the url, but other than that, nothing happens: /stagejulia.html#dag
• Julia: Oh, I'm sorry, my bad! I thought it wouldn't matter whether the pages were classes or id's. It did... :D