web-dev-qa-db-fra.com

Comment puis-je supprimer le hachage de localisation sans provoquer le défilement de la page? 

Est-il possible de supprimer le hachage de window.location sans faire en sorte que la page saute-défile vers le haut? Je dois pouvoir modifier le hachage sans provoquer de sauts.

J'ai ceci:

$('<a href="#123">').text('link').click(function(e) {
  e.preventDefault();
  window.location.hash = this.hash;
}).appendTo('body');

$('<a href="#">').text('unlink').click(function(e) {
  e.preventDefault();
  window.location.hash = '';
}).appendTo('body');

Voir des exemples en direct ici: http://jsbin.com/asobi

Lorsque l'utilisateur clique sur 'link', la balise de hachage est modifiée sans sauts de page.

Mais lorsque l'utilisateur clique sur 'unlink', la balise has est supprimée et la page défile vers le haut. Je dois supprimer le hash sans cet effet secondaire.

javascriptjqueryfragment-identifier
73
David Hellsing

Je crois que si vous mettez simplement un hachage factice, il ne défilera pas car il n’ya pas de correspondance possible.

<a href="#A4J2S9F7">No jumping</a>

ou

<a href="#_">No jumping</a>

"#" par lui-même est équivalent à "_top" provoque ainsi un défilement vers le haut de la page

92
scunliffe

J'utilise le suivant sur quelques sites, PAS DE PAGE JUMPS!

Belle barre d'adresse propre pour les navigateurs compatibles HTML5, et juste un # pour les navigateurs plus anciens.

$('#logo a').click(function(e){
    window.location.hash = ''; // for older browsers, leaves a # behind
    history.pushState('', document.title, window.location.pathname); // Nice and clean
    e.preventDefault(); // no page reload
});
33
neokio

la propriété hash de window.location est stupide à plusieurs égards. C'est l'un d'eux; l'autre est qu'il a différentes valeurs get et set:

window.location.hash = "hello";  // url now reads *.com#hello
alert(window.location.hash);   // shows "#hello", which is NOT what I set.
window.location.hash = window.location.hash; // url now reads *.com##hello

Notez que définir la propriété de hachage sur '' supprime également la marque de hachage; c'est ce qui redirige la page. Pour définir la valeur de la partie de hachage de l'URL sur '', en laissant le signe de hachage et donc sans rafraîchir, écrivez ceci:

window.location.href = window.location.href.replace(/#.*$/, '#');

Il n’ya aucun moyen de supprimer complètement le signe dièse une fois défini sans actualiser la page.

MISE À JOUR 2012:

Comme l'ont souligné Blazemonger et thinkdj, la technologie s'est améliorée. Certains navigateurs vous permettent d'effacer ce hashtag, mais d'autres non. Pour soutenir les deux, essayez quelque chose comme:

if ( window.history && window.history.pushState ) { 
    window.history.pushState('', '', window.location.pathname) 
} else { 
    window.location.href = window.location.href.replace(/#.*$/, '#'); 
}
18
olooney

Ceci est un ancien message mais je souhaitais partager ma solution Tous les liens de mon projet gérés par JS ont l'attribut href = "#_ js" (ou le nom que vous souhaitez utiliser uniquement à cette fin), et sur la page d'initialisation je fais:

$('body').on('click.a[href="#_js"]', function() {
    return false;
});

Ça va faire l'affaire

3
Tomer Gal

Si vous définissez window.location.hash sur un nom d'ancre vide ou inexistant, la page sera toujours forcée de passer en haut de la page. Le seul moyen d'éviter cela est de saisir la position de défilement de la fenêtre et de la redéfinir sur cette position après le changement de hachage.

Cela forcera également à repeindre la page (je ne peux pas l’éviter), mais comme elle est exécutée dans un processus js unique, elle ne sautera pas (théoriquement).

$('<a href="#123">').text('link').click(function(e) {
    e.preventDefault();
    window.location.hash = this.hash;
}).appendTo('body');

$('<a href="#">').text('unlink').click(function(e) {
    e.preventDefault();
    var pos = $(window).scrollTop(); // get scroll position
    window.location.hash = '';
    $(window).scrollTop(pos); // set scroll position back
}).appendTo('body');

J'espère que cela t'aides.

2
BGerrissen

Je ne suis pas sûr que cela produise le résultat souhaité, essayez-le:

$('<a href="#">').text('unlink').click(function(e) {
    e.preventDefault();
    var st = parseInt($(window).scrollTop())
    window.location.hash = '';
    $('html,body').css( { scrollTop: st });  
});

Enregistrez le décalage de défilement et restaurez-le après avoir attribué le hachage vide.

1
Tom Bartel

Avez-vous essayé return false; dans le gestionnaire d'événements? jQuery fait quelque chose de spécial quand vous faites cela, semblable à, mais autant que je sache, plus puissant que e.preventDefault.

1
Roman Nurik

J'espère que cela t'aides

html

<div class="tabs">
  <ul>
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
    <li><a href="#content3">Tab 3</a></li>
  </ul>
</div>
<div class="content content1">
    <p>1. Content goes here</p>
</div>
<div class="content content2">
    <p>2. Content goes here</p>
</div>
<div class="content content3">
    <p>3. Content goes here</p>
</div>

js

function tabs(){
  $(".content").hide();

  if (location.hash !== "") {
    $('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
    var hash = window.location.hash.substr(1);
    var contentClass = "." + hash;
    $(contentClass).fadeIn();
  } else {
    $(".tabs ul li").first().addClass("active");
    $('.tabs').next().css("display", "block");
  }
}
tabs();

$(".tabs ul li").click(function(e) {
  $(".tabs ul li").removeAttr("class");
  $(this).addClass("active");
  $(".content").hide();
  var contentClass = "." + $(this).find("a").attr("href").substr(1);
  $(contentClass).fadeIn();
  window.location.hash = $(this).find("a").attr("href");
  e.preventDefault();
  return false;
});

URL sans hash.
http://output.jsbin.com/tojeja

URL avec un hashtag qui ne saute pas à l'ancre.
http://output.jsbin.com/tojeja#content1

0
Shak Daniel