Навигация по браузеру важный инструмент , про который многие разработчики забывают и оставляю без реализации в своих проектах. Тем не менее многие пользователи предпочитают использовать в браузере элементы навигации исходя из более наглядной и обычной позиции в браузере меню, кнопок «Назад» и «Вперед». Для сайтов одностаничников или для сайтов с динамической подгрузкой контента использование браузерной навигации по умолчанию не возможно, для этого в браузере есть интерфейс объект History, с помощью этого объекта можно управлять историей браузера на сайте и подставлять нужный контент пользователю.

1. Сохраняем данные в массив и в history

	
var  upadatestate, content;
var links_state = {};
content = document.querySelector('.content-box');
// Браузерная навигация 
// По ссылка или по кликам для страниц сохраняем содержимое страниц в link_state
// Главная страница
if($('.main-content').html() !== undefined){
	var state = { 'page': 'main', 'link' : '?page=main'}
	links_state['main'] =  $('.main-content').html();
	history.pushState(state, "Main Page", state.link);
}
// Страница услуги
if($('.service-content').html() !== undefined){
	var state = { 'page': 'service', 'link' : '?page=service'}
	links_state['service'] =  $('.service-content').html();
	history.pushState(state, "Service Page", state.link);
}
// Страница контакты
if($('.contact-content').html() !== undefined){
	var state = { 'page': 'contact', 'link' : '?page=contact'}
	links_state['contact'] =  $('.contact-content').html();
	history.pushState(state, "Contact Page", state.link);
}

2. Заменяем контент при клике на браузерную навигацию

	
window.addEventListener('popstate', function(e){
	updatestate(e.state);
});
updatestate = function(state){
	if(!state || links_state[state.page] === 'undefined') return;
	content.innerHTML = links_state[state.page];
};