Create a website with jquery that doesn't refresh but the back button still works

I'm trying to create a website with different pages that all change with jquery (and maybe ajax, depending on how long it takes to initially load everything)

Basically, the idea is that when you click on an item to view it, some sort of animation happens, and then you can view that item/page without the browser refreshing. Each new "page" would be associated开发者_StackOverflow with a hash value, so the idea is, whenever the hash value is changed some js function happens to make the change happen. I'm doing this so when you press the back button, the hash will change and as a result change the content of the page.

I'm having a hard time trying to figure out how to monitor the hash value so something happens when the back button is pressed and the hash value changes... (I know how to make it on click it checks the hash value, I'm just stuck on the back button)

The idea is that the functionality will look similar to this website I found http://thinkav.co.nz/

Thanks

(I would ideally not like to use plugins)

You could try the jQuery BBQ: Back Button & Query Library

jQuery BBQ: Back Button & Query Library

and read something about hash bang urls

Hash URIs

you must consider making your ajax site crawlable

Making AJAX Applications Crawlable

what you're looking to do is a part of the new HTML5 specs, and is essentially using the pushState() method. This allows webpages to use the hashmark(#) as a reference just like a URL, therefore allowing you to use the back and forward buttons as normal. I've never used it, but this should point you in the right direction! Happy Coding!

Use Ben Almans hashchange plugin. It has a hashchange event that fires everytime the hashchanges.

$(document).ready(function() {

      // Bind the event.
      $(window).hashchange( function(){
        // Update page in here
      })

      // Trigger the event when the page first loads to handle the back button
      $(window).trigger("hashchange");
});

the url bar at the top of the page will always remember anchors without refreshing so just load content via ajax and let the browser do the remembering for you.

ie:

//the js
function load(){
    var hash = window.location.hash;
    var url = hash+".html";
    $("body").load(url); 
}

$(document).ready(function(){
    $("a").click(function(){
        load();
    });
});

//the html
<a href="#test">click me</a>

this should load test.html into the body with no refresh.