Back Button for a Single Paged Website

Question

I have a single paged website relying heavily on jQuery. As a portfolio, users can click on various designs, in which the jQuery will hide the main page, and reconstruct the design page based on the content returned by a query string.

The problem is, people that would like to go back to the main portfolio page will naturally press the BACK button on their browser, causing them to go back to whatever website they were on previously (e.g. Google Search). When in fact, the intended behaviour is that they return to the main.

My question is, what is the best way to implement a way so that the BACK button functions as if it was on a multipage website. Would it involve implementing my own stack of queries? What is the best option.

Many thanks. The website is here if you'd like to see it in action.

Answer 1

Take a look at the History.js library, handles both modern browsers and has fallbacks for older HTML4 browsers

https://github.com/browserstate/history.js/

In your event handler inside $(".mLink").click(function(){...

Whenever you trigger an scroll, you can add something like this

case "mL0":
    $("html, body").stop().animate({ scrollTop: 0}, 1000, 'easeInOutExpo');
    History.pushState(null, null, "?home"); 
    break;
case "mL1":
    $("html, body").stop().animate({ scrollTop: ($('#filter').offset().top-72) }, 1000, 'easeInOutExpo');
    History.pushState(null, null, "?portfolio"); 
    break;
...

Beautiful portfolio site, btw.

Answer 2

How about putting a hash tag in the URL? Something like this?

<a href="#about">About</a>

And somewhere in the code there should be a line with this?

<div id="about">
  <h2>About/h2>
  <!-- More content here -->
</div>

Answer 3

You might want to look into the HTML5 History API. There are lots of tutorials on how to get started with it, but the basic gist is that when you load a new "page" with jQuery, you push it onto the history stack:

// After loading the new page...
window.history.pushState({}, '', 'newpage.html');

This will make the user agent display yoursite.com/newpage.html in the URL bar even though the page was never loaded.

Caniuse reports that history API support is fairly good. The usual suspects (IE 7 and 8) have no support, but there are polyfills available.

The only caveat with the History API (and it's an important one) is this: the page that you pass as the third (optional) argument to history.pushState MUST exist on your server. A user could copy a URL from the URL bar and share it, so the page names must correspond to real pages. The trouble with this is that doesn't really seem like it would work with your site because you don't have separate pages that you're dynamically loading.

It appears to me that your portfolio is one continuous page, so for that I would recommend using hash urls. That is, urls like yoursite.com/#about and yoursite.com/#contact. You can update window.location to include the hash as you load new pages (and the browser won't re-load the page).

window.location = '#new-page-that-was-just-navigated-to';

Or you can just update window.location.hash. You can examine the contents of the hash with javascript when your site loads with this property to determine which page should be displayed.

$(document).ready(function() {
    switch(window.location.hash) {
        case 'home': // load home
        case 'about': // load about
        default: // load default page (index)
    }
});

Furthermore, you can abstract your JS from your HTML with the HashChange event (polyfill available on the MDN docs page). Instead of doing this:

<a href="javascript:void(0);" id="about">About</a>
<a href="javascript:void(0);" id="projects">Projects</a>
<a href="javascript:void(0);" id="contact">Contact</a>

<script>
document.getElementById('about').addEventListener('click', function() {
    // navigate to about page
}, false);

document.getElementById('projects').addEventListener('click', function() {
    // navigate to projects page
}, false);

//etc.
</script>

You can instead do this:

<a href="#about" id="about">About</a>
<a href="#projects" id="projects">Projects</a>
<a href="#contact" id="contact">Contact</a>

<script>
window.addEventListener('hashchange', function() {
    switch(window.location.hash) {
        case 'about': // load page
        case 'projects': // load page
        case 'contact': // load page
        default: // not found
    }
}, false);
</script>

The benefits of this are that your links have meaningful hrefs and you don't have to add event listeners to each link on your site. Just assign them a hash and listen for hashchange.

EDIT

Note that this also works with jQuery:

$(window).on('hashchange', function() {
    switch(window.location.hash) {
        case 'about': // load page
        case 'projects': // load page
        case 'contact': // load page
        default: // not found
    }
});

Answer 4

Your content is loading via AJAX in a single div. So it is little bit tough to go back to previous because your content is updated with the new one.

Answer 5

You can use "history.pushState" to change the URL based on the menu entry you click ... you can check this webpage for an example - http://html5.gingerhost.com/.

BACK button usually goes to the previous URL and in AJAX pages URL doesn't update by itself. You can explicitly change the URL using "history.pushState" and BACK will work like you expect it to.

This will also make your site Search Engine friendly