kommen Sie zu der gleichen Stelle zurück gehen mit infinite scrolling

Will ich implementieren Sie eine Funktionalität, wobei beim Klick auf den zurück-button, komme ich zurück zu der gleichen position. Ein gutes Beispiel kann http://www.jabong.com/men/clothing/mens-t-shirts/ . Hier, wenn Sie einen Bildlauf nach unten und klicke auf ein Produkt und klicken Sie auf zurück, von der Produkt-Seite, erreichen Sie die gleiche position auf der Seite, wo das Produkt ist.

Dem hier gezeigten Beispiel nicht Anhängen, nichts in der url zu merken Sie sich die position. Auch verwenden nicht es pushstate oder history.js (nicht das laden über ajax).

Irgendwelche Erkenntnisse, wie kann ich das machen?

EDIT: Im mit infinite scrolling Paginierung (wie pinterest), und die Seiten laden zum scrollen nach unten. Wenn ich zurück gehen, wird die Abfrage erneut ausgeführt und lädt die Seite. Wenn ich auf der 4. Seite vor, nach zurück geht, werden die Seiten nicht laden, bis Seite 4, und so gibt ' s eine Pause, damit ich nicht erreichen kann, die position.

Also meine Frage ist wie mache ich das mit infinite scrolling?

  • Jabong hängt die position in url : jabong.com/..., 15 ist der Wert von data-pos-Attribut auf jedes Element.
InformationsquelleAutor user_2000 | 2013-07-04
  1. 1

    Wenn Sie mit JQuery in Ihrer Applikation. Sie können versuchen, WayPoint Plugin seiner sehr einfach zu benutzen und zu Ihrer Frage, ich denke, das ist, was Sie suchen.

    hier ist ein Beispiel, Infinite Scrolling und wie es funktioniert:

    http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/

    Werfen Sie auch einen Blick auf diese tutorials für infinite scrolling mit verschiedenen anderen plugins, die Sie verwenden können, was immer einem Ihren Bedürfnissen am besten entspricht.

    http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

    EDIT:

    Wenn Ihr auf der Suche zum wiederherstellen der Ort, wo der Nutzer aufgehört hat, mit unendlicher scrollen Sie mit der zurück-Taste, das ist ein bisschen komplizierter und erfordert etwas mehr Arbeit auf Ihrem Teil und wie werden die Daten generiert wird. Bitte werfen Sie einen Blick auf eine ähnliche Frage hier:

    Ist es möglich, zu schreiben, eine "Unendliche Scrollen", um javascript-Code, kann mit dem zurück-button?

    InformationsquelleAutor Prakash Chennupati
  2. 0

    Ich hab das gleiche problem und die situation war ziemlich ähnlich: kein Lesezeichen oder geänderte Parameter in der url.

    Hier ist meine Lösung, und es funktioniert:

    1) können Sie window.history.go(-1) oder window.history.back(), das ist das gleiche wie "zurück" - button des Browsers, navigieren Sie zur vorherigen Seite.

    2) Wenn Sie diese Funktion verwenden, aus irgendeinem Grund mag es nicht zurück zu der position, die Sie auf Ihrer letzten Seite (zB. wählen Sie ein Bild unten auf der Seite aus und leitet Sie zur nächsten Seite. Wenn Sie auf 'zurück' - Taste, geht es zurück an die Spitze der vorherigen Seite). In diesem Fall müssen Sie die aktuelle scrollY Wert var currentScrollYonSession = window.scrollY auf die Sitzung oder anderen Ort, je nach Ihrem code wenn die app leitet Sie auf die nächste Seite (normalerweise ist es onClick() oder onChange() Ereignis). Wenn Sie klicken Sie auf die Schaltfläche "zurück" und die app lädt die Vorherige Seite, Erstens prüfen der Sitzung, dass die scrollY Wert null ist oder nicht. Wenn es null ist, laden Sie einfach die Seite wie Sie ist; anderenfalls abrufen der scrollY Wert, laden Sie die Seite, und legen Sie die scrollY Wert für die aktuelle Seite: window.scroll(0, currentScrollYonSession).

    • Sie sagen, dass es funktioniert. Welche Browser hast du getestet, darunter mobile?
    • chrome und firefox.
    InformationsquelleAutor Winters
  3. 0

    Ich kam mit einer Lösung für meine app um dies zu erreichen:

    $(document).on('click', 'a', function() {
  var scrollpos = $(window).scrollTop(); 
  localStorage.setItem('scrollpos', scrollpos);
});

    Diese nutzt LocalStorage zum speichern an, wie viele Pixel wir sind von oben nach unten, von der Seite.

    var scrollplan = function() {
  var foo = true
  if ((foo == true) && $('.box').length > 30) {
      var bar = localStorage.getItem('scrollpos')
      $("html, body").animate({ scrollTop: bar}, 500);
  }
    $('.photosbtn').on('click', function(){
      var foo = false
    });
  };

    Das erstmalige laden der Seite hat 30 Fotos mit Klasse Boxen. Meine Seitenzählung beginnt mit dem Klick auf einen btn mit Klasse photosbtn.

    InformationsquelleAutor Timmy Von Heiss
Schreibe einen Kommentar