2017-07-26 5 views
2

Ich weiß nicht, ob es irgendwie möglich ist zu erreichen, was ich tun möchte. Ich habe einzelne Seite Website mit einigen Abschnitten. Etwas wie folgt aus:Manuell hinzufügen Browser-Verlauf Eintrag (Cross Browser)

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

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

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

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

Wenn Sie die Seite öffnen, Seiten 2, 3 und 4 display:none und die erste display:block bekam. Wenn ich einen Link in meiner Navigation klicken, wird die aktuelle „Seite“ ausblendet und was Link geklickt haben, verschwindet der zugehörige Abschnitt in den Links wie folgt aussehen:.

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

Und hier ist der Code jQuery:

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

Was ziemlich offensichtlich ist, ist, wenn ich die zurück-Taste Browser klicken, wird es nicht den vorherigen Abschnitt blendet. es wird wieder nur auf die vorherige Seite, die ich geöffnet habe.

Meine Frage ist also: Gibt es eine Möglichkeit, einen Verlaufseintrag im Browser hinzuzufügen, wenn Sie auf einen Link klicken? Also kann ich die Zurück-Taste drücken und es blendet den vorherigen Abschnitt ein?

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

Aber das ist leider nichts zu dem, was ich erreichen möchte:
Um den sichtbaren Ausschnitt zu erhalten, bevor Sie einen Link zu klicken, habe ich dies getan.

würde ich unglaublich glücklich, wenn mir jemand etwas Hilfe von liefern könnte, wie ich diesen Ansatz könnte (oder wenn es überhaupt möglich ist)

+2

Es ist sicherlich möglich, mit PushState: https://developer.mozilla.org/en/docs/Web/API/History_API#Adding_and_modifying_history_entries –

+0

@RoryMcCrossan Vielen Dank für Ihre schnelle Antwort. Sie müssen die URL also ändern, damit dies funktioniert (das wäre kein Problem von c)? –

+0

Ja, die URL muss geändert werden. Obwohl Sie nur ein Fragment hinzufügen können, so dass Sie die aktuelle Seite nicht umleiten oder entfernen, zB 'foo.html # bar' –

Antwort

2

Sie haben den Browser verwenden History API die URL zu aktualisieren. Dann können Sie die Hin- und Herbewegung mit onpopstate erkennen und Ihre Methoden fadeIn und entsprechend aufrufen.

0

Ich hatte die super ähnliche Situation! Die beste Lösung, die mein Freund verwenden würde https://alvarotrigo.com/fullPage/ Sie können den Code lesen, wie er auf Github tut. Grundsätzlich müssen Sie den Scrollvorgang aufzeichnen und später mit einer Funktion für das Vor- und Zurückblättern arbeiten.

+0

Ich kenne das FullPage-Plugin, habe aber nie realisiert, dass man mit der Zurück-Taste zum vorherigen Abschnitt gelangen kann! Vielen Dank! –

+0

Ich würde Ihnen wärmstens empfehlen, das @TobiasGlaus zu benutzen, das auch auf eigene Faust Sie zu vielen Wanzen führen könnte oder Zeit verbraucht. – Danish