Comment créer un lien vers une partie d'une page? (hacher?)


210

Comment établissez-vous un lien (avec <a>) pour que le navigateur accède à certains sous-titres de la page cible par opposition au haut?

Réponses:


275

S'il existe une <a name="foo">balise ou une balise avec un id(par exemple, <div id="foo">), vous pouvez simplement l'ajouter #fooà l'URL. Sinon, vous ne pouvez pas créer de liens arbitraires vers des parties d'une page.

Voici un exemple complet: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Lier du contenu sur le même exemple de page: <a href="#foo">Jump to #foo on same page</a>



alors utilisez-vous l'exemple complet ou le même exemple de page? l'exemple complet n'est-il pas la même chose?
akantoword

2
si nous avions une page reposante avec une URL comme: domain.com/#home?page=1comment utiliser un identifiant en href?
iraj jelodari

1
@irajjelodari Vous mettriez le hachage à la fin:domain.com/?page=1#home
tomsmeding

je devais utiliser 2 hashtags dans l'URL comme: example.com/#RouteName?page=1#ID. un pour le routage et un pour la navigation à l'intérieur de la page actuelle. enfin j'ai utilisé le mode html5 de l'URL afin de supprimer les hashtags de route;) @tomsmeding
iraj jelodari

41

Vous utilisez une ancre et un hachage. Par exemple:

Cible du lien:

 <a name="name_of_target">Content</a>

Lien vers la cible:

 <a href="#name_of_target">Link Text</a>

Ou, si vous créez un lien depuis une autre page:

 <a href="http://path/to/page/#name_of_target">Link Text</a>

8
Le broser sautera également à n'importe quel élément avec l'id name_of_target. Vous n'avez pas besoin d'utiliser une <a>balise comme cible. Un autre objectif pourrait donc être <h3 id='name_of_target'>Content</h3>.
Cyrille

8
Notez que cela est désormais obsolète en HTML5.
Tim

33

Ajoutez simplement un hachage avec l'ID d'un élément à l'URL. Par exemple

<div id="about"></div>

et

http://mysite.com/#about

Le lien ressemblerait donc à:

<a href="http://mysite.com/#about">About</a>

ou juste

<a href="#about">About</a>

21

Voici comment:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>

2
Tu quoi? Vous avez une fermeture </a>après une ouverture <div ...>- vous ne savez pas vraiment ce que vous essayez de faire ici.
Dominic Rodger

1
j'ai copié ma ligne de lien et collé ci-dessous et j'ai oublié de fermer la div. Merci quand même.
Sarfraz

10

Vous avez deux options:

Vous pouvez soit mettre une ancre dans votre document comme suit:

<a name="ref"></a>

Ou bien vous donnez un identifiant à un élément HTML quelconque:

<h1 id="ref">Heading</h1>

Ensuite, ajoutez simplement le hachage #refà l'URL de votre lien pour accéder à la référence souhaitée. Exemple:

<a href="document.html#ref">Jump to ref in document.html</a>

6

Le 12 mars 2020, un brouillon a été ajouté par WICG pour les fragments de texte , et maintenant vous pouvez lier au texte sur une page comme si vous le recherchiez en ajoutant ce qui suit au hachage

#:~:text=<Text To Link to>

Exemple de travail sur Chrome Version 81.0.4044.138:

Cliquez sur ce lien Devrait recharger la page et mettre en évidence le texte du lien

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.