history.pushState breaking on browser back button

Question

I'm working on a single page application where each section is loaded via ajax. The homepage is its own page, then you click 'About' and it takes you to the single page app. I've gotten the url to change on each section and the back and forward buttons on the browser to work with this snippet:

$('.down-button').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });

However, when you click all the way back to the homepage, the homepage does not refresh, you remain on the 'About' page. Or, if you click on a link back to the homepage, you get a 404 error.

What am I missing?

EDIT

Here is the rest of the code:

function button_scroll () {
// Call scrollIntoView js file into this 
$.getScript("/js/jquery.scrollintoview.min.js", function() {
    $('.down-button').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-principles').on('click', function() {
        var stateObj = { mission: "about-mission" };
        history.pushState(stateObj, null, "about-mission");
        $('#mission-wrap').scrollintoview({ duration: 1000 });
    });
    $('.down-button-principles').on('click', function() {
        var stateObj = { snapshot: "about-snapshot" };
        history.pushState(stateObj, null, "about-snapshot");
        $('#snapshot-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-snapshot').on('click', function() {
        var stateObj = { principles: "about-principles" };
        history.pushState(stateObj, null, "about-principles");
        $('#principles-wrap').scrollintoview({ duration: 1000 });
    });
    $('.down-button-snapshot').on('click', function() {
        var stateObj = { people: "about-people" };
        history.pushState(stateObj, null, "about-people");
        $('#people-wrap').scrollintoview({ duration: 1000 });
    });
    $('.up-button-people').on('click', function() {
        var stateObj = { snapshot: "about-snapshot" };
        history.pushState(stateObj, null, "about-snapshot");
        $('#snapshot-wrap').scrollintoview({ duration: 1000 });
    });

});

}

//Dropdown
$(document).ready(function () {
$(window).on('load resize', function () {
    resize_mission();
    resize_principles();
    resize_snapshot();
    resize_people();
    button_scroll();
});
var dropDown = $('.dropdown');
$('h3.about').on('click', function() {
    dropDown.slideDown('fast', function() {
        var url = 'about2.php'
        var stateObj = { mission: "about-mission" };
        history.pushState(stateObj, null, "about-mission");
        $.get(url, function(data) {
            resize_mission();
            resize_principles();
            resize_snapshot();
            resize_people();
            button_scroll();
        });
    });
});

});

This is all I'm doing. No plugins.

Answer 1

Are you stopping the default action of the click event to homepage on the about page? As in are you using preventDefault() or stopPropagation() on a link click on your about page? Also are you stopping the default behaviour on the hashchange event? We might need to see some more code around your implementation of history. Are you using any plugins for history?