How to change my Url without reloading the browser?

Question

Basically, when I click a link on my homepage, I want to use some JavaScript to slid in a new div and change the url so that if the url was typed, it would bring the right info. I dont want the entire page to load when a link is click. While surfing from link to link, I want to animate the webs change instead loading a new page.

Answer 1

There are 3 ways of achieving this:

Using plain JavaScript in your anchors (DEFINITELY NOT RECOMMENDED)
By doing this i mean literally do:

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

You could do this, but this means you will be polluting the global scope with global variables and functions, which is strictly not recommended.

Using the "#" in all your anchors This is the most common and safest way to do it, since is available in almost all major browsers and their different versions

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

The intention of the hash is to take you directly to a section within the document you are currently reading, that section is defined by the id attribute in HTML, this was intended for very large HTML documents. With the hash and the window.onhashchange event you can get what you want, except for some old versions of IE which i think are 7 and below.

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

More on hashchange: onhashchange event

Using the window.history API This is the newest way to achieve it, since it's quite new not all browsers support it, but it's a nice way to do it:

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

Where:
stateObj: is an object that can be passed between history states.
title: Just a title for the new state.
url: The new URL to be displayed in the address bar.
This function call will trigger the window.onpopstate event on the browser.

More on History API:HTML5 History API

Hope this can help you.

Answer 2

You can do this:

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

You can use this code, which I've taken from css-tricks

$(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;
            }
        }
    });
});

The above will automatically do the work for you.

Demo

Answer 3

If you want to work with "old" browsers then window.location.hash is your only option, and this can't manipulate the whole URL, only manipulate for example #about to the end.

If you're willing to forgo old browsers then you can go window.history.pushState as described here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Here is an overview for browser compatibility with pushState: http://caniuse.com/#search=pushstate

There's more information in this thread: How can I change the page URL without refreshing the page?

Answer 4

You might want to look at ember.js. It is a framework that does exactly what you're asking about (if I understood you correctly) and it handles all of the history for you. There's a helpful tutorial on code school to get you going that walks you through building a simple bootstrap site at: https://www.codeschool.com/courses/warming-up-with-emberjs