Javascript anchor navigation


I am creating a website with the "anchor navigation" like used with facebook and google mail. I have got it working but not fully. When I load the page with something like #contact it won't load it in unless I click the link for it. Also, would there be a better, more efficient way to do what I am doing? I am not the best person with JS programming.


$.navigate = function() {
  // a new link
  if($anchor != document.location.hash){
    // add a preloader
      .html('<p class="align-center"><img src="assets/images/loading.gif" /></p>');
    // change the anchor saved for next time
    $anchor = document.location.hash;
    // get the variables ready for the get
    var i = $anchor.substring(1).split("/");
    var $page = i[0];
    var $y = (i[1]) ? i[1] : false;
    // get the file
    $.get("callback.php", { x: $page, y: $y }, function(data){

$(function() {

  var $anchor = "";
  // change from the URI. This dont work.
  if(document.location.hash){ $.navigate(); }

    .each(function() { 
      $(this).attr("href","#" + $(this).attr("name")); 

  setInterval('$.navigate()', 300);



<div id="nav">  
  <ul class="horizontal-nav">
    <li><a href="" name="index">Home</a></li>
    <li><a href="" name="about">About</a></li>
    <li><a href="" name="portfolio">Portfolio</a></li>
    <li><a href="" name="contact">Contact</a></li> 
  <div id="l-nav"></div>
  <div id="r-nav"></div>  

Best Solution

Try the ReallysimpleHistory jquery plugin.