history.pushState 브라우저 백 버튼 깨기

Question

각 섹션이 ajax를 통해로드되는 단일 페이지 응용 프로그램에서 작업하고 있습니다. 홈페이지는 자체 페이지이며 '정보'를 클릭하면 단일 페이지 응용 프로그램으로 이동합니다. 나는이 조각 작업을 브라우저의 각 섹션 뒤로 및 앞으로 단추를 변경할 수있는 URL을 입수했습니다 다시 홈페이지에있는 모든 방법을 클릭하면 그러나

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

을, 홈페이지하지 않습니다 새로 고침하면 '정보'페이지에 계속 남아 있습니다. 또는 홈페이지로 돌아가는 링크를 클릭하면 404 오류가 발생합니다.

무엇이 누락 되었습니까? 편집

나머지 코드이다

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

});

이것은 내가하고있는 전부입니다. 플러그인이 없습니다.

Answer 1

약 페이지의 클릭 이벤트의 기본 동작을 홈페이지로 중지 하시겠습니까? 링크를 통해 preventDefault() 또는 stopPropagation()을 (를) 사용하고 계신가요? 또한 hashchange 이벤트의 기본 동작을 중지 하시겠습니까? 우리는 당신의 역사 구현에 대해 좀 더 많은 코드가 필요할지도 모른다. 기록 용 플러그인을 사용하고 있습니까?