Search code examples
javascriptjqueryanchorhref

jQuery: Show hidden section and navigate to anchor

I created a page with a bunch of section elements keyed to specific ids. The page also has a list of links pointing to each section, like so:

<li><a class='subsection-nav gotoStep1' href='#step-1'>Step 1 Title</a></li>

I'm using jQuery to show only one section at a time:

// Defaults
$('.document-subsection').hide();
$('.gotoStep1').addClass("active");
$('#step-1').show();
// Step 1
$('.gotoStep1').click(function() {
    $('.subsection-nav').removeClass('active');
    $('.gotoStep1').addClass("active");
    $('.document-subsection').hide();
    $('#step-1').show();
    return false;
});
// Etc.

The trouble is, the jQuery function seems to override the standard browser behavior of scrolling to the named id. I want clicking the link to both show the hidden section and navigate to the specified id. I can't imagine this would be very hard, I just don't know how.

Solution

  • Just remove the 

    return false;

    in your onclick callback. This will allow the browser to perform the default function of navigating the page to the element with the matched id.