Puis-je mettre à jour window.location.hash sans avoir la page Web défilée?
En utilisant 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 permettent la visibilité d'un div directement sous eux. Je veux que la barre / foo # de l'historique soit en cliquant sur les titres mais ne souhaite pas que la page se déplace. Donc, lorsque vous naviguez à partir de / foo # bar, je pourrai utiliser le bouton arrière et que le div dont ID est dans window.location.hash soit visible lors du retour.
Ce comportement est-il possible?
- JavaScript – bfcache / pageshow event – event.persisted toujours défini sur false?
- L'emplacement angulaire $ ne se met pas à jour lorsque le navigateur est utilisé
- Comment puis-je insérer une entrée dans l'historique de navigation via JavaScript
- Détectant le bouton de retour du navigateur dans javascript / jquery sans utiliser de plugins externes
- Changer l'URL de Javascript comme Facebook fait
- Back Button Handle Un formulaire dynamique
- Comment puis-je faire une page de rechargement Firefox lorsque vous appuyez sur le bouton Retour?
- Le retour du navigateur agit sur l'iframe imbriqué avant la page elle-même – existe-t-il un moyen de l'éviter?
- Comment déclencher le changement lors de l'utilisation du bouton de retour avec history.pushstate et popstate?
- Comment détecter si l'utilisateur a cliqué sur le bouton "Retour"
Ce comportement est très possible. Vous devriez examiner certaines des bibliothèques qui ont été développées pour vous donner cette fonctionnalité.
L'histoire vraiment simple: http://code.google.com/p/reallysimplehistory/ SWFAddress: http://www.asual.com/swfaddress/
Aussi simple qu'il en soit
var scrollmem = $('html,body').scrollTop(); window.location.hash = hash; $('html,body').scrollTop(scrollmem); Pour changer le hash sans avoir à recharger / défiler la page, vous pouvez maintenant utiliser html5 history.pushState .
history.pushState(null,null,'#hashexample');
Il est pris en charge par tous les principaux navigateurs:
MDN:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState().C2.A0method
Notez également que le dernier paramètre d'URL que nous utilisons ici, il peut s'agir de n'importe quelle URL, donc ce n'est pas limité aux hachis.
Une autre chose que vous pourriez essayer est de changer l'id de l'élément que le hash pointe temporairement. J'ai 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 }
Je voulais ajouter un commentaire à la réponse de Catherines mais je n'ai pas encore le représentant –
Une excellente solution mais cela ne fonctionnait pas pour moi dans Chrome comme $ ('html'). ScrollTop () renvoie toujours 0 – une édition mineure résout le problème:
scrollmem = $('html').scrollTop() || $('body').scrollTop(); window.location.hash = hash; $('html,body').scrollTop(scrollmem);
Bas sur la réponse de Sunny, j'ai fait cette fonction qui évite aussi indéfinie et nulle:
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; } } }