web-dev-qa-db-fra.com

hachage dans les balises d'ancrage

Comment charger une page et l'ouvrir à un certain emplacement de la page chargée?

Par exemple, disons que j'ai page1.html, qui a 3 liens

<a href="page2.html#1">1</a>
<a href="page2.html#2">2</a>
<a href="page2.html#3">3</a>

sur page2.html, J'ai également ces liens sur la page, c'est-à-dire.

<a href="page3.html#1">1</a>
<a href="page3.html#2">2</a>
<a href="page3.html#3">3</a>

mais quand je clique sur le #2 ou #3 lien de page1.html, ils s'ouvrent toujours en haut de la page, même si #2 et #3 sont hors de l'écran sur page2.html qui doit être déroulé pour être vu.

Je ne sais pas ce que je fais mal.

htmlanchor
20
oshirowanen

Vous devez mettre nommé ancres sur page2.html, ainsi:

<a name="1"></a>
…
<a name="2"></a>
…
<a name="3"></a>

- C'était avant HTML5. De nos jours, vous utilisez id au lieu de name.

36
Konrad Rudolph

Vous devez ajouter un ID à l'élément auquel il doit "sauter".

Par exemple, si vous avez

<div id="part1">
  <p>Blah blah blah</p>
</div>

<div id="part2">
  <p>Blah blah blah</p>
</div>

<div id="part3">
  <p>Blah blah blah</p>
</div>

Et ils sont tous dans page.html

Ensuite, vous pouvez créer un lien vers page.html#part1, page.html#part2 etc etc et il sautera à la bonne partie de la page

Mise à jour:

Vous pouvez également utiliser l'attribut name mais je préfère utiliser id. En effet, tout peut avoir un identifiant mais pas nécessairement un nom. Par exemple, je ne pense pas que le nom soit un attribut valide pour une balise 'a' en HTML 5. De plus, si vous avez un élément avec id = "part1" et un autre élément différent avec name = "part1", celui avec l'id prendra la priorité. Pour éviter toute confusion, je m'en tiens à la seule méthode tout au long. Il y a un peu plus de discussion à ce sujet ici

22
Addsy

L'utilisation de l'attribut name ou de l'attribut id dans une balise d'ancrage sur la page cible permettrait d'obtenir le résultat souhaité.

<a name="someLocation" id="someLocation">SomeText</a>

En tant que convention XHTML 1.1, l'attribut name d'une balise d'ancrage a été remplacé par l'attribut id. Dans le contexte de XHTML 1.0, l'attribut name est considéré comme obsolète.

Voir cette réponse pour une discussion connexe sur les modifications apportées à la balise d'ancrage.

Pour résumer: pour des raisons de compatibilité, beaucoup suggèrent d'utiliser à la fois un attribut id et un attribut name, au sein du même élément. Dans ce cas, une balise d'ancrage.

La norme W3C recommande (en ce qui concerne tous les éléments applicables):

Les attributs id et name partagent le même espace de noms. Cela signifie qu'ils ne peuvent pas tous les deux définir une ancre avec le même nom dans le même document. Il est permis d'utiliser les deux attributs pour spécifier l'identifiant unique d'un élément pour les éléments suivants: A, APPLET, FORM, FRAME, IFRAME, IMG et MAP. Lorsque les deux attributs sont utilisés sur un seul élément, leurs valeurs doivent être identiques.

Toutes mes excuses pour toute duplication, je n'ai pas la réputation de commenter la meilleure réponse.

7
Tony Fiorentini

Étant donné que ces messages sont toujours trouvés, je voudrais ajouter une mise à jour:

<a href="#jumppoint">goto '#jumppoint'</a>

saute à:

<div id="jumppoint">  <!-- name="" does not work here on modern browsers -->
   <h2>here</h2>
</div>

et:

<a name="jumppoint" />
<h2>here</h2>
4
BananaAcid

Nommez vos ancres ou mettez des liens vers vos éléments:

www.votresite/index.html # content Vous fera défiler jusqu'à <div id="content"> s'il existe, ou à <div name="content">.

1
monsieur_h

vous devez attribuer des noms de section ou des identifiants 1, 2 et 3 aux sections, cela fonctionnera pour vous.

0
Ovais Khatri