history.pushState casser sur le bouton de retour du navigateur

Question

Je travaille sur une application d'une seule page où chaque section est chargée via ajax. La page d'accueil est sa propre page, puis vous cliquez sur "À propos de" et il vous amène à l'application d'une seule page. Je suis devenu l'URL pour changer de chaque section et les boutons avant et arrière sur le navigateur pour fonctionner avec cet extrait:

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

Cependant, lorsque vous cliquez sur le chemin du retour à la page d'accueil, la page d'accueil ne actualisez, vous restez sur la page "A propos". Ou, si vous cliquez sur un lien vers la page d'accueil, vous obtenez une erreur 404.

Qu'est-ce qui me manque?

EDIT

Voici le reste du 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(); 
     }); 
    }); 
}); 

});

C'est tout ce que je fais. Pas de plugins.

Answer 1

Etes-vous en train d'arrêter l'action par défaut de l'événement click sur la page d'accueil de la page about? Comme en utilisez-vous preventDefault() ou stopPropagation() sur un lien cliquez sur votre à propos de la page? Également vous arrêtez le comportement par défaut sur l'événement hashchange? Nous pourrions avoir besoin de voir plus de code autour de votre implémentation de l'histoire. Utilisez-vous des plugins pour l'histoire?