jQuery history usage

Question

I have created a webpage that uses jQuery to show and hide elements. The obvious problem now arose; the back and forward browser buttons don't work anymore as everything is loaded within a single location.

I know the answer lies within jQuery History but after busting my head for several hours on their website and examples given here on stackoverflow, I still cant manage to:

A) create a history entry (I think i got this covered but not 100% sure) B) animate the page transition with my own function (displayed beneath)

This is the website: www.grommit.nl

There are 4 sub-pages that require a history entry when called upon.

This code shows the transition of the "wordpress page". The other pages work in a similiar way. (so far I have only managed to generalize the last part of the pageload with the "LoadPageContent" function, the bit before that is different with every page)

var LoadPageContent = function() {
            $(".sceneBody").slideDown(function() {
                $(".aftertitle").css('width', '4em');
                $(".mediacontainer").fadeTo('0.3s', 1,)
            });

$("#goWordpress").click(function () {
            $("#homeScene").fadeOut(function () {
                $("#wordpressMessage").fadeIn(function() {
                    $(this).delay(300).slideUp(function() {
                        $("#wordpressPage, #grommitFixed").slideDown(function() {
                             LoadPageContent();                             
                        });
                    });
                });
            });
        });

this is the function that is currently working as a previous button within the DOM. I would like this function to execute when the previous button is clicked.

var goBack = function() {
            $(".aftertitle").css('width', '0em')
                $(".mediacontainer").fadeTo('0.3s', 0, function() {
                    $(".scenebody, #grommitFixed").slideUp(function() {
                        $("*[id*=Page]:visible").each(function() {
                            $(this).slideUp(function() {
                                $("#homeScene").fadeIn();
                            });
                        });
                    });
                 });

        };

Answer 1

In html5 you have something called pushstate, that you can use to tell the browser what to go back to. Check out:

html pushstate