Como faço para criar um link para uma nota de rodapé em HTML?
https://stackoverflow.com/questions/66964
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Por exemplo:
Este é o corpo principal do meu conteúdo.Eu tenho uma nota de rodapé para esta linha [1].Então, eu tenho mais conteúdo.Parte disso é interessante e também tem algumas notas de rodapé [2].
[1] Aqui está minha primeira nota de rodapé.
[2] Outra nota de rodapé.
Então, se eu clicar no link "[1]", ele direcionará a página da web para a primeira referência da nota de rodapé e assim por diante.Como exatamente faço isso em HTML?
Solução
Dê um ID a um contêiner e use # para se referir a esse ID.
por exemplo.
<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>Outras dicas
É uma boa prática fornecer um link da nota de rodapé para onde ela é referenciada (assumindo que haja um relacionamento 1:1).Isso é útil porque o botão Voltar levará o usuário de volta à posição de rolagem em que estava anteriormente, deixando o leitor encontrar seu lugar no texto.Clicar em um link para onde a nota de rodapé foi referenciada no texto coloca esse texto no topo da janela, tornando muito fácil para o leitor continuar de onde parou.
Quirksmode tem uma página em notas de rodapé na web (embora sugira que você use notas laterais em vez de notas de rodapé, acho que as notas de rodapé são mais acessível, com um link para a nota de rodapé e a nota de rodapé seguida por um link para o texto, suspeito que seriam mais fáceis de seguir com um leitor de tela).
Um dos links da página quirksmode sugere ter uma seta, ↩, após o texto da nota de rodapé com link de volta, e usar a entidade ↩por esta.
por exemplo.:
This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2">[2]</a>.
<p id="footnote-1">
1. Here is my first footnote. <a href="#footnote-1-ref">↩</a>
</p>
<p id="footnote-2">
2. Another footnote. <a href="#footnote-2-ref">↩</a>
</p>
Não tenho certeza de como os leitores de tela lidariam com a entidade.O link dos comentários da postagem de Grubber está Postagem de Bob Eastern sobre a acessibilidade das notas de rodapé o que sugere que não é lido, embora isso tenha acontecido há alguns anos e eu espero que os leitores de tela já tenham melhorado.Para acessibilidade, pode valer a pena usar uma âncora de texto como "retornar ao texto" ou talvez colocá-la no atributo title do link.Também pode valer a pena colocar um na nota de rodapé original, embora eu não saiba como os leitores de tela lidariam com isso.
This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1" title="link to footnote">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2" title="link to footnote">[2]</a>.
<p id="footnote-1">
1. Here is my first footnote.
<a href="#footnote-1-ref" title="return to text">↩</a>
</p>
<p id="footnote-2">
2. Another footnote.
<a href="#footnote-2-ref" title="return to text">↩</a>
</p>
(Estou apenas supondo as questões de acessibilidade aqui, mas como isso não foi levantado em nenhum dos artigos que mencionei, achei que valia a pena mencioná-lo.Se alguém puder falar com mais autoridade sobre o assunto, eu estaria interessado em ouvir.)
Primeiro você entra e coloca uma tag âncora com um atributo de nome na frente de cada nota de rodapé.
<a name="footnote1">Footnote 1</a>
<div>blah blah about stuff</div>
Esta tag âncora não será um link.Será apenas uma seção nomeada da página.Em seguida, você transforma o marcador de nota de rodapé em uma tag que se refere à seção nomeada.Para se referir a uma seção nomeada de uma página, você usa o sinal #.
<p>So you can see that the candidate lied
<a href="#footnote1">[1]</a>
in his opening address</p>
Se quiser criar um link para essa seção de outra página, você também pode fazer isso.Basta vincular a página e colar o nome da seção nela.
<p>For more on that, see
<a href="mypaper.html#footnote1">footnote 1 from my paper</a>
, and you will be amazed.</p>
Você precisará configurar tags âncora para todas as suas notas de rodapé.Prefixá-los com algo assim deve bastar:
<a name="FOOTNOTE-1">[ 1 ]</a>
Em seguida, no corpo da sua página, crie um link para a nota de rodapé assim:
<a href="#FOOTNOTE-1">[ 1 ]</a>
(observe o uso do nome contra o href atributos)
Essencialmente, sempre que você definir o nome de uma tag A, poderá acessá-la vinculando-se a #NAME-USED-IN-TAG.
http://www.w3schools.com/HTML/html_links.asp tem mais informações.
Para o seu caso, provavelmente é melhor fazer isso com tags a-href e tags a-name em seus links e rodapés, respectivamente.
No caso geral de rolagem para um elemento DOM, há um Plug-in jQuery.Mas se o desempenho for um problema, sugiro fazer isso manualmente.Isso envolve duas etapas:
- Encontrar a posição do elemento para o qual você está rolando.
- Rolando para essa posição.
modo peculiar dá uma boa explicação do mecanismo por trás do primeiro.Aqui está minha solução preferida:
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}
Ele usa a conversão de nulo para 0, o que não é etiqueta adequada em alguns círculos, mas eu gosto :) A segunda parte usa window.scroll.Então o resto da solução é:
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}
Voilá!
A resposta de Peter Boughton é boa, mas poderia ser melhor se em vez de declarar a nota de rodapé como "p" (parágrafo), você declarasse como "li" (item de lista) dentro de um "ol" (lista ordenada):
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>
Desta forma, não é necessário escrever o número em cima e em baixo...contanto que as referências estejam listadas na ordem correta abaixo.
tags de âncora usando âncoras nomeadas
Use marcadores em tags âncora...
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>
Este é o corpo principal do meu conteúdo.Eu tenho um link de nota de rodapé para esta linha [1].Então, tenho mais algum conteúdo.Algumas delas são interessantes e também possuem algumas notas de rodapé [2].
[1] Aqui está minha primeira nota de rodapé.
[2] Outra nota de rodapé.
Faça <a href=#tag> texto </a>
e depois na nota de rodapé:<a name="tag"> texto </a>
Tudo sem espaços.Referência: http://www.w3schools.com/HTML/html_links.asp
<a name="1">Nota de rodapé</a>
bla bla
<a href="#1">vá</a> para a nota de rodapé.
