blog.rebeccamurphey.com Adventures in front-end consulting

Anchor-based URL navigation with jQuery

By Rebecca | December 4, 2007

categories: front-end development, javascript, jquery

Update: I've since written a anchor-based URL navigation plugin that attempts to capture what's described below.

--

I'm working on an application that has several panels of content, each accessed by clicking on a link in the page's main navigation. I wanted to give users the ability to get back to a panel after they'd left the application, without having to click on the panel in the navigation again, so I set it up so the URL would include an anchor link indicating the current panel (e.g. http://www.mysite.com/index.html#panel1).

This had the added benefit of encouraging me to be a good front-end developer by following the principles of progressive enhancement -- before I set this up, a user without Javascript wouldn't get anywhere when they clicked on a link in the page's main navigation, and that's no good. Now, users without Javascript will be taken down the page to the panel they want, and users with Javascript will get the fancy Web 2.0 panels that show and hide and fade and stuff.

Here's what I did:

• Set up anchor tags at the top of each "panel" div, and give the anchor tags a class of anchor:

   
  <div class="step" id="panel1">
    <a class="anchor" name="panel1"></a>
    ...
  </div>
   

• Put links to the anchors in the main navigation:

   
  <ol id="nav">
  <li><a href="#panel1">Panel 1</a></li>
   
    ...
  </ol>
   

• Set up the onclick behavior for the main navigation items:

   
   
  var j = 1;
  $('ol#nav li').each(function() {
    $(this).click(function() {
      $('ol#nav li').removeClass('current');
      $(this).addClass('current');
      $('div.panel:visible').hide();
      $('#panel'+j).fadeIn(500);
    });
    j++;
  });
   
  // don't include return false! you want the URL
  // to change to reflect which panel is showing --
  // the next step will make it so that all of the anchors
  // will be at the top of the page, so the fact that this
  // returns true won't cause the page to scroll to the anchor.
   

• Move all the anchor tags to the top of the page so users with Javascript won't get bumped down the page when they click on a link:

   
  $('a.anchor').remove().prependTo('body');
   

  You might not want to include this step, or you might want to move the anchor tags elsewhere. This worked for me in this case, though.

• When a user arrives on the page, look to see if they've requested a specific panel:

   
  var myFile = document.location.toString();
  if (myFile.match('#')) { // the URL contains an anchor
    // click the navigation item corresponding to the anchor
    var myAnchor = '#' + myFile.split('#')[1];
    $('ol#nav li a[href="' + myAnchor + '"]').parent().click();
  } else {
    // click the first navigation item
    $('ol#nav li:first').click();
  }
   

The end. Now users who arrive via a URL that includes an anchor tag will go to the proper panel, and everyone else will get the default behavior of going to the first panel.

Tags: jquery, progressive enhancement | 7 Comments »