arriver à la même position en revenant en arrière avec le défilement infini

Question

Je veux mettre en place une fonctionnalité dans laquelle, en cliquant sur le bouton retour, je reviens à la même position. Un bon exemple pourrait être http://www.jabong.com/men/clothing/mens-t-shirts/ . Ici, si vous faites défiler la page vers le bas, que vous cliquez sur un produit et que vous revenez sur la page du produit, vous revenez au même endroit de la page où se trouve le produit.

L'exemple montré ici n'ajoute rien dans l'url pour se souvenir de la position. De plus, il n'utilise pas pushstate ou history.js (pas de chargement par ajax).

Avez-vous une idée de la façon dont je peux faire cela ?

EDIT : J'utilise une pagination à défilement infini (comme Pinterest), et les pages continuent à se charger lors du défilement vers le bas. Quand je reviens en arrière, la requête s'exécute à nouveau et recharge la page. Si j'étais à la 4ème page avant, après être revenu en arrière, les pages ne se chargent pas avant la 4ème page et il y a donc une pause, ce qui fait que je ne peux pas atteindre cette position.

Ma question est donc la suivante : comment puis-je faire cela avec le défilement infini ?

Answer 1

Vous pouvez utiliser history.replaceState pour enregistrer la position de défilement juste avant de quitter la page. Lorsque l'utilisateur revient, vous pouvez vérifier si une position de défilement est présente dans le fichier history.state et si, faites défiler jusqu'à cette position.

Une autre chose à prendre en compte est que les navigateurs peuvent également faire persister la page lorsqu'ils la quittent (si la politique de cache le permet) et la restaurer lorsqu'ils reviennent, y compris la position de défilement. Dans ce cas, aucun événement du navigateur ne sera déclenché au retour, à l'exception de la commande pageshow (vérifiez le support de votre navigateur) qui vous indiquera via event.persisted si la page est servie à partir du cache ou non. Vous voudrez peut-être écouter cet événement pour effacer la position de défilement de l'état stocké, encore une fois par l'intermédiaire de history.replaceState .

Enfin, vous devez tenir compte du fait que les navigateurs effectuent eux-mêmes la restauration du défilement et que vous devez probablement la désactiver via history.scrollRestoration (mais vérifiez le support des navigateurs)

Answer 2

Si vous pouvez utiliser JQuery dans votre application. Vous pouvez essayer Plugin WayPoint Il est très simple à utiliser et d'après votre question, je pense que c'est ce que vous recherchez.

Voici un exemple de défilement infini et de son fonctionnement :

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

Jetez également un coup d'œil à ces tutoriels pour le défilement infini à l'aide de divers autres plugins, vous pouvez utiliser celui qui convient le mieux à vos besoins.

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

EDITAR:

Si vous cherchez à restaurer l'emplacement où l'utilisateur s'est arrêté avec le défilement infini en utilisant le bouton retour, c'est un peu plus délicat et nécessite un peu plus de travail de votre part et la façon dont vos données sont générées. Veuillez consulter une question similaire ici :

Est-il possible d'écrire un javascript "Infinite Scroll" qui puisse gérer le bouton retour ?

Answer 3

J'ai eu le même problème et la situation était assez similaire : aucun signet ou paramètre modifié sur l'url.

Voici ma solution et elle fonctionne :

1) Vous pouvez utiliser window.history.go(-1) o window.history.back() qui est le même que le bouton retour du navigateur, pour revenir à la page précédente.

2) Lorsque vous utilisez cette fonction, pour une raison ou une autre, il se peut que vous ne reveniez pas à la position de votre dernière page (par exemple, vous sélectionnez une image en bas de la page et elle est redirigée vers la page suivante. Lorsque vous cliquez sur le bouton "Retour", il revient au début de la page précédente). Dans ce cas, vous devez définir la valeur actuelle de scrollY. var currentScrollYonSession = window.scrollY sur la session ou à un autre endroit, en fonction de votre code, lorsque l'application redirige vers la page suivante (normalement c'est onClick() o onChange() événement). Lorsque vous cliquez sur le bouton "retour" et que l'application charge la page précédente, vérifiez d'abord si la valeur scrollY est nulle ou non. Si elle est nulle, chargez simplement la page telle quelle ; sinon, récupérez la valeur scrollY, chargez la page et définissez la valeur scrollY à la page actuelle : window.scroll(0, currentScrollYonSession) .

Answer 4

J'ai trouvé une solution pour mon application pour y parvenir :

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

Elle utilise LocalStorage pour enregistrer le nombre de pixels qui nous séparent du haut de la page.

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

Le chargement initial de la page comporte 30 photos avec des boîtes de classe. Ma pagination commence en cliquant sur un btn avec la classe photosbtn.