web-dev-qa-db-fra.com

Lien d'ancrage HTML sans défilement ni saut

J'ai plusieurs liens qui ont tous des identifiants uniques qui sont des "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 pas faire défiler n'importe où, 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 lien "bouton 1", l'URL pourrait être http://example.com/foo.php#button1

Est-ce que quelqu'un a des idées pour ça? Avoir juste un peu de javascript return 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.

javascripthtmlxhtmlscrollanchor
24
Neil

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.

9
Peter Bailey

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, ça devrait marcher:

<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. Ainsi, puisque vous souhaitez 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 même si je ne suis pas sûr de savoir comment mootools gère les événements.

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

34
Adam Batkin

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

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

De plus, preventDefault

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

J'ai trouvé la solution. Ici, je sauvegarde un ancien emplacement de l’appel href Et le restaure après le défilement.

<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

3
Jeff_Alieffson

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 le mode d'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é).

1
anschauung

Voilà 7 ans après la publication de cette réponse, j’ai trouvé un moyen différent de le faire fonctionner: il suffit de pointer le window.location.hash sur un ancre inexistant! Cela ne fonctionne pas pour <a>s mais fonctionne parfaitement dans <div>s.

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

A bien fonctionné 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.

0
Heitor