Lien d'ancrage HTML sans défilement ni saut

Question

J'ai plusieurs liens qui ont tous des identifiants uniques qui sont & "pseudo-ancres. &"; Je veux qu’ils affectent la valeur de hachage de l’URL et la magie du clic est gérée par du code mootools. Cependant, lorsque je clique sur les liens, ils défilent vers eux-mêmes (ou vers le haut dans un cas). Je ne veux faire aucun défilement, mais j'ai également besoin de mon javascript pour s'exécuter et pour avoir la valeur de hachage dans la mise à jour de l'URL.

Exemple de code simulé:

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

Donc, si vous deviez cliquer sur le bouton & "; 1" & "; lien, l'URL pourrait être http://example.com/foo.php#button1

Quelqu'un a-t-il des idées à ce sujet? Le simple fait d'avoir un javascript return void tue le défilement mais tue aussi mon javascript (bien que je puisse probablement le contourner avec un onclick), mais plus important encore, empêche la valeur de hachage dans l'URL de changer.

Answer 1

Je manque probablement quelque chose, mais pourquoi ne pas simplement leur donner des identifiants différents?

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

Ou quelle que soit la convention que vous préférez.

Answer 2

L'intérêt d'un lien d'ancrage est de faire défiler une page vers un point particulier. Donc, si vous ne voulez pas que cela se produise, vous devez attacher un gestionnaire onclick et renvoyer false. Même en l'ajoutant comme attribut, cela devrait fonctionner:

<a href="#button1" id="button1" onclick="return false">button 1</a>

L’un des effets de ce qui précède est que l’URL elle-même ne changera pas, car renvoyer false annulera l’événement. Donc, puisque vous voulez que l'URL change réellement, vous pouvez définir la variable window.location.hash sur la valeur souhaitée (il s'agit de la seule propriété de l'URL que vous pouvez modifier sans que le navigateur ne force le rechargement). Vous pouvez probablement attacher un gestionnaire d'événements et appeler quelque chose comme window.location.hash = this.id bien que je ne sois pas sûr de savoir comment mootools gère les événements.

(De plus, tous les identifiants doivent être uniques)

Answer 3

Vous pouvez utiliser le code ci-dessous pour éviter le défilement:

<a href="javascript:void(0);">linktxt</a>

Answer 4

J'ai trouvé la solution. Ici, je sauve un ancien lieu d'appeler href et le restaurer après avoir fait défiler

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

et dans le corps de la page

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a> 

Merci à sitepoint

Answer 5

En outre, preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }

Answer 6

Une solution plus simple consisterait probablement à l'ajouter en tant que GET. C'est-à-dire, http://example.com/foo.php?q=#button1 au lieu de http://example.com/foo.php#button1

Cela n'aura aucun effet sur l'affichage de la page (sauf si vous le souhaitez) et la plupart des langages de script disposent déjà d'outils leur permettant de lire les données facilement (et en toute sécurité).

Answer 7

Eh bien, cela fait 7 ans que cette réponse a été publiée et j’ai trouvé un moyen différent de le faire fonctionner: il suffit de pointer window.location.hash sur une ancre inexistante! Cela ne fonctionne pas pour <a> s mais fonctionne parfaitement dans <div> s.

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

Fonctionne correctement sous Chrome 56, Firefox 52 et Edge (IE?) 38. Un autre point positif est que cela ne génère aucune erreur de la console ni aucun avertissement.

J'espère que ça aide quelqu'un d'autre que moi.