Puis-je mettre à jour window.location.hash sans faire défiler la page Web?

Question

À l'aide de JavaScript, existe-t-il un moyen de mettre à jour window.location.hash sans faire défiler la page Web?

J'ai des éléments de titre cliquables qui bascule la visibilité d'une div directement en dessous. Je souhaite que la barre / foo # de l’historique apparaisse lorsque je clique sur un titre, mais je ne souhaite pas que la page défile. Ainsi, lorsque vous vous éloignerez de / foo # bar, je pourrai utiliser le bouton Précédent pour que le div dont l’ID est dans window.location.hash soit visible au retour.

Ce comportement est-il possible?

Answer 1

Ce comportement est très possible. Vous devriez consulter certaines des bibliothèques qui ont été développées pour vous offrir cette fonctionnalité.

Histoire vraiment simple: http://code.google.com/p/reallysimplehistory/"/ a> SWFAddress: http://www.asual.com/swfaddress/

Answer 2

Pour modifier le hachage sans avoir à recharger / faire défiler la page, vous pouvez maintenant utiliser simplement html5 history.pushState .

history.pushState(null,null,'#hashexample');

Il est supporté par tous les principaux navigateurs:

http://caniuse.com/history

MDN:

https: //developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulation_du_browser_history#The_pushState().C2.A0method

Notez également que le dernier paramètre de l'URL que nous utilisons ici peut être n'importe quelle URL, il n'est donc pas limité aux hachages.

Answer 3

Aussi simple que cela

var scrollmem = $('html,body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);

Answer 4

Une autre chose que vous pouvez essayer est de changer l’identifiant de l’élément sur lequel les points de hachage sont temporairement. Travaillé pour moi!

function changeHashWithoutScrolling(hash) {
  var id = hash.replace(/^.*#/, ''),
      elem = document.getElementById(id)
  elem.id = id+'-tmp'
  window.location.hash = hash
  elem.id = id
}

Answer 5

Je voulais ajouter un commentaire à la réponse de Catherines mais je n'ai pas encore le représentant -

Excellente solution, mais cela ne fonctionnait pas dans Chrome sous la forme $ ('html'). scrollTop () renvoie toujours 0 - une modification mineure résout le problème:

scrollmem = $('html').scrollTop() || $('body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);

Answer 6

Basée sur la réponse de Sunny, cette fonction évite également les caractères indéfinis et nuls:

    function changeHashWithoutScrolling(hash) {
        var id;
        var elem;

        id = hash.replace(/^.*#/, '');

        if (id) {
            elem = document.getElementById(id);

            if (elem) {
                elem.id = id + '-tmp';
                window.location.hash = hash;
                elem.id = id;
            }
        }
    }