How to enable back button on ajax page

Question

I'm working on a site which navigates as follow:

$(document).ready(function () {
  if (!$('#ajax').length) { // Check if index.html was loaded. If not, navigate to index.html and load the hash part with ajax.
    document.location = document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)
      + "#" + document.location.href.substr(document.location.href.lastIndexOf('/') + 1);
  }

  if (window.location.hash) // Check if the page is being loaded with a '#'. Load the file.
    $('#ajax').load(document.location.href.substr(document.location.href.lastIndexOf('#') + 1));
});

$(document).on("click", "a:not(.regular)", function (e) {
  var url = this.href;
  if (url.indexOf("https") != -1 || url.indexOf('.html') == -1) // External link or picture
    return;

  e.preventDefault();

  $('#ajax').load(url, function () {
      document.location.href = '#' + url.substr(url.lastIndexOf('/') + 1);
  });
});

$(window).on('popstate', function (e) {
    // Back only!
    //location.reload();
    //$('#ajax').load(this.location);
});

The url changes when user navigates, even when user presses the back button. However, the page isn't refreshed when navigating back so only the url changes while the actual page remains the same.

How can I fix this?
Fiddle
Actual site

Answer 1

Adding the page identfier after the # is responsible for the effect. Everything behind # (URL fragment) is supposed to be interpreted by the browser locally. Thus, going back with the same URL but a different fragment does not trigger the browser to do a "reload", since he expects this to be a bookmark.

Change for a real parameter .....?pageid=over_ons.html or go with PATH_INFO .../overons.html

Besides that:

document.location.href.substring(0, document.location.href.lastIndexOf('/') + 1)

is just

document.location.hash