web-dev-qa-db-fra.com

Ramener l'utilisateur à l'endroit où il a fait défiler la page précédente en cliquant sur le bouton Précédent du navigateur

Est-il possible de ramener un utilisateur à la zone d'une page où il a fait défiler vers le bas en appuyant sur le bouton de retour dans un navigateur? Comme dans --- pageA est le double de la taille de votre écran (vous devez donc faire défiler pour en savoir plus). Vous cliquez sur un lien sur la pageA pour accéder à une nouvelle page - pageB. Après avoir lu, vous cliquez de nouveau dans le navigateur. Maintenant, lorsque vous revenez à la page A, vous êtes de retour en haut et vous devez faire défiler vers le bas pour continuer à lire le reste de la page.

Existe-t-il un moyen Jquery ou JS pour revenir à ce point de la page. Peut-être quelque chose avec .scrollTop ()?

javascriptjquerybrowserback-button
19
RooksStrife

Si le contenu est chargé après le déclenchement de l'événement de "chargement" de la page, le bouton Retour ne vous ramènerait pas à la position où vous vous trouviez. Parce que le navigateur défile avant l'événement "load".

Pour que le navigateur se souvienne de la position de défilement dans ce cas, vous devez stocker la position et l'état du défilement (quel contenu a été chargé) quelque part avant de partir. Soit dans le cookie, soit dans le hachage d'URL.

Si pageA est juste une page statique sans contenu dynamique (chargée après l'événement 'load', le navigateur doit se souvenir de la position de défilement lorsque vous revenez en arrière.

Pour le contenu dynamique, il comprend au moins deux parties. L'un récupère l'état de la page lorsque vous cliquez sur le bouton "Retour", de sorte que tout le contenu dynamique est chargé, certains expanseurs sont développés ou réduits. L'autre fait défiler jusqu'à là.

La première partie dépend de la façon dont la page est implémentée. La 2ème partie, vous pouvez mettre le haut de défilement dans le cookie lorsque la page fait onUnload. Par exemple

$(window).unload(function() {$.cookie('scrollTop',$(window).scrollTop());});
9
Sheng

Vous pouvez le faire en utilisant le stockage de session.

$(window).scroll(function () {
  //set scroll position in session storage
  sessionStorage.scrollPos = $(window).scrollTop();
});
var init = function () {
   //return scroll position in session storage
   $(window).scrollTop(sessionStorage.scrollPos || 0)
};
window.onload = init;
11
Bowen

Vous pouvez utiliser le code suivant pour détecter la position de défilement.

 $(window).scroll(function (event){
    var scroll = $(window).scrollTop();
    // Do something
 });

Ensuite, enregistrez le défilement dans une session et lorsque vous cliquez sur Précédent, faites scrollTop(scroll).

5
user254153