Как изменить мой URL без перезагрузки браузера?

Существует три способа достижения этого:

Использование обычного JavaScript в ваших якорях (ОПРЕДЕЛЕННО НЕ РЕКОМЕНДУЕТСЯ)
Делая это, я имею в виду буквально:

<a href="javascript:goToHome()">Home page</a>

Вы можете это сделать, но это означает, что вы будете загрязнять глобальную область глобальными переменными и функциями, что строго не рекомендуется.

Использование "#" во всех ваших якорях Это самый распространенный и безопасный способ сделать это, поскольку он доступен практически во всех основных браузерах и их разных версиях

<a href="#/home/">Home page</a>

Цель хэша состоит в том, чтобы передать вас непосредственно в раздел в документе, который вы сейчас читаете, этот раздел определяется атрибутом id в HTML, это предназначалось для очень больших HTML-документов. С хешем и событием window.onhashchange вы можете получить то, что хотите, за исключением некоторых старых версий IE, которые, я думаю, составляют 7 и ниже.

window.addEventListener('hashchange', function(event) {
    //your navigation logic here
});

Подробнее о hashchange: событие onhashchange

Использование API window.history Это самый новый способ его достижения, поскольку он совсем не поддерживается всеми браузерами, но это хороший способ сделать это:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

Где:
stateObj: объект, который может быть передан между состояниями истории.
title: Просто заголовок для нового состояния.
url: новый URL-адрес, который будет отображаться в адресной строке.
Этот вызов функции вызывает событие window.onpopstate в браузере.

Подробнее о API истории: API истории HTML5

Надеюсь, это может вам помочь.

Вы можете посмотреть на ember.js. Это структура, которая делает именно то, о чем вы спрашиваете (если я правильно вас понял), и она обрабатывает всю историю для вас. Там есть полезный учебник по кодовой школе, который поможет вам подойти к созданию простого загрузочного сайта по адресу: https://www.codeschool.com/courses/warming-up-with-emberjs

Вы можете сделать это:

window.location.hash = "id of the element to be scrolled to";

Вы можете использовать этот код, который я взял из css-трюков

$(function () {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

Вышеуказанное автоматически выполнит вашу работу.

демонстрация

Если вы хотите работать со "старыми" браузерами, то window.location.hash - это ваш единственный вариант, и это не может манипулировать всем URL-адресом, а манипулировать, например, #about до конца.

Если вы хотите отказаться от старых браузеров, вы можете перейти в window.history.pushState, как описано здесь: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Вот обзор совместимости браузера с pushState: http://caniuse.com/#search=pushstate

Там больше информации в этой теме: Как изменить URL-адрес страницы, не обновляя страницу?