web-dev-qa-db-fra.com

Comment puis-je conserver la position de défilement d'une zone défilable lorsque j'appuie sur le bouton de retour?

J'ai une longue liste de liens à l'intérieur d'un grand div scrollable. Chaque fois qu'un utilisateur clique sur un lien, puis sur le bouton de retour, il commence tout en haut de la div. Il n'est pas convivial pour nos utilisateurs. Est-il possible de laisser le navigateur revenir à la position précédente en appuyant sur le bouton de retour?

Merci beaucoup!

javascriptjqueryhtmlgoogle-chromebrowser
19
user2335065

Pendant le déchargement de page, obtenez la position de défilement et stockez-la dans le stockage local. Ensuite, pendant le chargement de la page, vérifiez le stockage local et définissez cette position de défilement. En supposant que vous ayez un élément div avec id element. Dans le cas où c'est pour la page, veuillez changer le sélecteur :)

$(function() {
   $(window).unload(function() {
      var scrollPosition = $("div#element").scrollTop();
      localStorage.setItem("scrollPosition", scrollPosition);
   });
   if(localStorage.scrollPosition) {
      $("div#element").scrollTop(localStorage.getItem("scrollPosition"));
   }
});
20
mohamedrias

Je pense que nous devrions enregistrer les données de défilement par page, nous devons également utiliser le stockage de session au lieu du stockage local, car la session storge n'affecte que l'onglet actuel tandis que le stockage local est partagé entre tous les onglets et fenêtres de la même origine

$(function () {
            var pathName = document.location.pathname;
            window.onbeforeunload = function () {
                var scrollPosition = $(document).scrollTop();
                sessionStorage.setItem("scrollPosition_" + pathName, scrollPosition.toString());
            }
            if (sessionStorage["scrollPosition_" + pathName]) {
                $(document).scrollTop(sessionStorage.getItem("scrollPosition_" + pathName));
            }
        });
5
Jondi

Lorsque vous utilisez window.history.back(), il s'agit en fait de la fonctionnalité de navigateur par défaut comme SD SD l'a souligné .

Sur un site que je suis en train de construire, je voulais que le logo de la société fasse un backlink vers la page d'index. Depuis jQuery 3, $(window).unload(function() doit être réécrit en $(window).on('unload', function(). Mon code ressemble à ceci (en utilisant la syntaxe php de Kirby CMS):

<?php if ($page->template() == 'home'): ?>

<script>

$(function() {
 $(window).on("unload", function() {
    var scrollPosition = $(window).scrollTop();
    localStorage.setItem("scrollPosition", scrollPosition);
 });
 if(localStorage.scrollPosition) {
    $(window).scrollTop(localStorage.getItem("scrollPosition"));
 }
});

</script>
2
bruno

J'ai eu le même problème avec une interface utilisateur simple composée d'un div de menu fixe et d'un div de document défilant ("pxeMainDiv" dans l'exemple de code ci-dessous). La solution suivante a fonctionné pour moi dans Chrome 47.0.2526.106 m et dans Firefox 43.0.3. (Mon application est à utiliser en interne et je n'avais pas besoin de prendre en charge les anciennes versions d'IE) .

$(document).ready(function(){
    if (history.state) {
       $("#pxeMainDiv").scrollTop(history.state.data);
    }
    $("#pxeMainDiv").scroll(function() {
       var scrollPos = $("#pxeMainDiv").scrollTop();
       var stateObj = { data: scrollPos };
       history.replaceState(stateObj, "");
    });
});

Sur l'événement de défilement div, la position de défilement du div est stockée dans l'objet d'état à l'intérieur de l'objet d'historique du navigateur. Après une pression sur le bouton Retour, sur l'événement de document prêt, la position de défilement du div est restaurée à la valeur récupérée à partir de l'objet history.state.

Cette solution devrait fonctionner pour la navigation inverse d'une chaîne de liens arbitrairement longue.

Documentation ici: https://developer.mozilla.org/en-US/docs/Web/API/History_API

2
G Stokes

Si un bouton de retour est une sorte de bouton de retour d'historique window.history.back() Alors ce que vous cherchez, c'est une fonctionnalité de navigateur par défaut. Vous n'avez donc pas à vous en préoccuper.

Si votre bouton de retour pointe vers une URL dans votre application via un lien ou un formulaire, vous devez le faire manuellement.

Pour solution, vous pouvez utiliser des cookies pour stocker la valeur de défilement de votre page. Chaque fois que l'utilisateur fait défiler votre page, enregistrez la valeur de défilement de cette page dans le cookie. Un travail supplémentaire est appliqué à la gestion manuelle des cookies.

window.onScroll = function(){
    document.cookie="pageid=foo-"+window.scrollY+";";
}

Cette valeur de cookie peut être utilisée pour définir la valeur de défilement de la page lors de la visite de la page.

window.scroll(0,cookievalue);
1
SD.