patternjavascriptMinor

Animations when navigation items are clicked

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

arenavigationanimationsitemswhenclicked

Problem

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

`

//------------One page item (there are 5)---------------//

over

//------------Fullscreen menu overlay ------------------//

Close

home

over

Solution

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


    
        home
        over
        een dag bij
        werkzaamheden  
        contact

and page items like this:


    
        
            over

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

Code Snippets

<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>

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

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

Context

StackExchange Code Review Q#70901, answer score: 4

Revisions (0)

No revisions yet.