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錯誤。

我錯過了什麼？

EDIT

這裏是代碼的其餘部分：

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事件的默認行爲？我們可能需要在執行歷史記錄時看到更多的代碼。你使用任何插件的歷史？