2017-07-26 158 views
2

我不知道是否有可能以任何方式實現,我想要做什麼。 我有一些部分單頁網站。事情是這樣的:手動添加瀏覽器歷史記錄條目(跨瀏覽器)

<div class="page pageOne"></div> 

<div class="page pageTwo"></div> 

<div class="page pageThree"></div> 

<div class="page pageFour"></div> 

當你打開該網站,2,3和第4頁有display:none,第一個display:block。當我點擊我的導航鏈接,當前的「頁」淡出和你點擊任何鏈接,則屬於部分消失中的鏈接是這樣的:

<a class="pageChange" href=".pageFour">Four</a> 

而這裏的jQuery代碼:

$(".pageChange").click(function(e){ 
    e.preventDefault(); 
    var href = $(this).attr("href"); 
    $(".page").fadeOut(200); 
    setTimeout(function(){ 
     $(href).fadeIn(); 
    }, 200); 
}); 

什麼是很明顯的是,當我點擊瀏覽器後退按鈕,也不會掉色在前面的章節。它只是將返回到以前的網站我已經打開。

所以我的問題是:有沒有辦法在瀏覽器中添加一個歷史記錄,當點擊一個鏈接?所以我可以按下後退按鈕,它會淡入前一部分?
要點擊一個鏈接之前獲得的可見部分,我已經做到了這一點:

var currentPage = $(".page:visible").attr('class').split(' ')[1]; 

但不幸的是這是沒有用的,我想要實現的。

我會很開心的不得了,如果有人能提供給我的,我怎麼能處理這一些幫助(如果它甚至有可能)

+2

當然可以,使用pushState:https://developer.mozilla.org/en/docs/Web/API/History_API#Adding_and_modifying_history_entries –

+0

@RoryMcCrossan感謝您的快速響應。所以你需要改變網址才能使之工作(這不會是c的問題)? –

+0

是的,網址必須改變。雖然你可以添加一個片段,所以你不會重定向或卸載當前頁面,例如'foo.html#bar' –

回答

2

您必須使用瀏覽器History API更新URL。然後您可以使用onpopstate來檢測來回移動,並相應地調用您的fadeInfadeOut方法。

0

我有超級類似的情況!我的朋友最好的解決方案是使用https://alvarotrigo.com/fullPage/你可以閱讀代碼,他如何在github上做的。基本上你必須記錄滾動和稍後使用一個函數來回瀏覽。

+0

我知道fullPage插件,但從來沒有意識到你可以使用後退按鈕來到上一節!謝謝! –

+0

我強烈建議你使用@TobiasGlaus也可以自己做,可能會導致你很多錯誤或將消耗時間。 – Danish