7
\$\begingroup\$

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>

\$\endgroup\$
4
\$\begingroup\$

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);
});
\$\endgroup\$
  • \$\begingroup\$ 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 \$\endgroup\$ – Julia Nov 26 '14 at 12:16
  • 1
    \$\begingroup\$ Oh, I'm sorry, my bad! I thought it wouldn't matter whether the pages were classes or id's. It did... :D \$\endgroup\$ – Julia Nov 26 '14 at 12:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.