Самая простая и пуленепробиваемая техника — использовать плагины вроде jquery.history.js.

Покажу на примитивном примере (эффектные анимации оставим для другой беседы). Есть что-то вроде галереи, где каждый кадр — якорная ссылка на следующий:

<div class="gallery" id="gallery">
  <a id="1" href="#2" style="display: block;">1</a>
  <a id="2" href="#3">2</a>
  <a id="3" href="#1">3</a>
</div>

Функция $.history.init() следит за изменениями якоря, а $.history.load() изменяет его. Скрипт, оживляющий галерею выглядит так:

$(function(){
  var gallery = $('#gallery');
  var frame = $('a', gallery);

  var changeFrame = function(hash) {
    if(hash != '') {
      var activeFrame = $('#' + hash).show();
      if (activeFrame.size()) frame.not(activeFrame).hide();
    } else {
      frame.eq(0).show().siblings().hide();
    }
  };

  // Слежу за изменениями хеша
  $.history.init(changeFrame);

  frame.click(function(e) {
    e.preventDefault();
    var hash = $(this).attr('href').replace('#', '');
    // Изменяю хеш и добавляю запись в историю
    $.history.load(hash);
  });
});

Результат:

После нескольких кликов можно перематывать кадры браузерными кнопками «назад» и «вперёд». При перезагрузке отображается тот кадр, на котором остановились.

Так же работает страница про Командор 2.0.

Если записывать каждый шаг в историю не нужно, лучше отказаться от плагинов, и воспользоваться методом document.location.replace():

Пример без сохранения истории

В некоторых случаях хватит и вовсе одного ЦСС. Псевдо-класс target позволяет управлять стилями элементов, чей айди совпадает с хешем в адресной строке. Например:

.gallery A {
  display: none;
}
.gallery A:target {
  display: block;
}

Недостаток этого способа в том, что браузер ещё и скролит страницу к якорю:

Пример c target

Чтобы отключить паразитный скрол, я сделал якорями невидимые элементы, которые через тильду ~ сообщают о своём состоянии соседям — видимым кадрам.

Разметка изменилась так:

<div class="gallery" id="gallery">
  <div id="i1" class="pseudo-target"></div>
  <div id="i2" class="pseudo-target"></div>
  <div id="i3" class="pseudo-target"></div>

  <a rel="i1" href="#i2" style="display: block;">1</a>
  <a rel="i2" href="#i3">2</a>
  <a rel="i3" href="#i1">3</a>
</div>

ЦСС:

.gallery .pseudo-target {
  display: none;
}

#i1:target ~ A[rel=i1],
#i2:target ~ A[rel=i2],
#i3:target ~ A[rel=i3] {
  display: block;
}

Пример с якорями-посредниками

В ИЕ тильда поддерживается с 7-й версии, target — только с 9-й.

Наконец, можно манипулировать историей браузера с помощью методов объекта history. Здесь диезик #, предназначенный для исключительно якорной навигации, не нужен — адресная строка может принимать любой вид.

Базовое использование очень схоже с jquery.history.js: $.history.init(onHashChange) заменяется на window.onpopstate = onHashChange, $.history.load() — на history.pushState().

Пример с history

Такой метод хорош для построения архитектуры сложных сайтов без перезагрузки между страницами.