Make the Next and Previous navigation reload the main section of a page using jQuery.load. history.pushState is used to keep the URL in the location bar up to date, and the loading of the content is done with a touch of animation.

script.js

// History logic: http://adhockery.blogspot.com/2011/02/javascripts-history-object-pushstate.html
if (history.pushState) {
  var selector = "#main",
      loadSelector = " " + selector + " > *",
      container = $(selector).on("click", "nav[role='pagenavigation'] a", function() {
        var href = $(this).attr("href");
        $("html, body").animate({ "scrollTop": 0 }, 400);
        history.pushState({ "path": href }, null, href);
        container.
          animate({ "opacity": 0 }, 400).
          load(href + loadSelector, function() {
            container.promise().done(function() {
              container.css("opacity", 1);
            });
          });
        return false;
      });
  $(window).bind("popstate", function(e) {
    var state = e.originalEvent.state;
    if (state) {
      $("window, body").animate({ "scrollTop": 0 }, 200);
      container.load(state.path + loadSelector);
    }
  });
  history.replaceState({ "path": location.href }, "");
}