Comment créer un lien vers une note de bas de page dans HTML?
Par exemple:
C'est le corps principal de mon contenu. J'ai une liaison de note de bas de page pour cette ligne [1]. Ensuite, j'ai encore plus de contenu. Certaines sont intéressantes et certaines notes de bas de page [2].
[1] Voici ma première note de bas de page.
[2] Une autre note de bas de page.
Donc, si je clique sur le lien "[1]", il dirige la page Web à la première référence de la note de bas de page et ainsi de suite. Comment puis-je accomplir cela en HTML?
Donnez un conteneur un identifiant, puis utilisez # Pour faire référence à cet identifiant.
par exemple.
<p>This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.</p>
<p id="footnote-1">[1] Here is my first footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>D'abord, vous entrez et mettez une balise d'ancrage avec un attribut de nom devant chaque note de bas de page.
<a name="footnote1">Footnote 1</a>
<div>blah blah about stuff</div>
Cette étiquette d'ancrage ne sera pas un lien. Ce sera juste une section nommée de la page. Ensuite, vous faites le marqueur de note de bas de page une balise qui fait référence à cette section nommée. Pour faire référence à une section nommée d'une page, vous utilisez # signe #.
<p>So you can see that the candidate lied
<a href="#footnote1">[1]</a>
in his opening address</p>
Si vous souhaitez créer un lien dans cette section d'une autre page, vous pouvez le faire aussi. Il suffit de lier la page et d'exploiter le nom de la section sur celui-ci.
<p>For more on that, see
<a href="mypaper.html#footnote1">footnote 1 from my paper</a>
, and you will be amazed.</p>
Pour votre cas, vous avez probablement le meilleur de cela avec des balises A-HREF et des balises A-nom dans vos liens et vos pieds de page, respectivement.
Dans le cas général de défilement à un élément DOM, il y a un plug-in jquery . Mais si la performance est un problème, je vous suggérerais de le faire manuellement. Cela implique deux étapes:
- Trouver la position de l'élément que vous faites défiler.
- Défilement à cette position.
Quirksmode donne une bonne explication du mécanisme derrière le premier. Voici ma solution préférée:
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}
Il utilise la coulée de NULL à 0, qui n'est pas une étiquette appropriée dans certains cercles, mais je l'aime :) La deuxième partie utilise window.scroll. Donc, le reste de la solution est:
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}
Voilà!
La réponse de Peter Boughton est bonne, mais elle pourrait être meilleure si au lieu de déclarer la note de bas de page en tant que "P" (paragraphe), vous avez déclaré "Li" (list-item) dans une "liste ordonnée" (liste de commande):
This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.
<h2>References</h2>
<ol>
<li id="footnote-1">Here is my first footnote.</li>
<li id="footnote-2">Another footnote.</li>
</ol>
De cette façon, il n'est pas nécessaire d'écrire le numéro sur le dessus et ci-dessous ... Tant que les références sont répertoriées dans le bon ordre ci-dessous.
tags d'ancrage à l'aide d'ancres nommées
Utilisez des signets dans les balises d'ancrage ...
This is main body of my content. I have a footnote link for this
line <a href="#foot1">[1]</a>. Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a href="#foot2">[2]</a>.
<div>
<a name="foot1">[1]</a> Here is my first footnote.
</div>
<div>
<a name="foot2">[2]</a> Another footnote.
</div>
<a name="1"> Note de bas de page </a>
bla bla
<a href="#1"> Go </a> à la note de bas de page.