Как создать ссылку на сноску в HTML?

Хорошей практикой является предоставление ссылки назад из сноски туда, где на нее ссылаются (предполагая, что существует соотношение 1:1). Это полезно, потому что кнопка назад вернет пользователя в положение прокрутки, в котором он находился ранее, оставляя читателю возможность найти свое место в тексте. Щелчок по ссылке назад к тому месту, где сноска была упомянута в тексте, помещает этот текст в верхнюю часть окна, что делает его очень легким для читателя, чтобы продолжить там, где они остановились .

Quirksmode имеет страницу на сносках в интернете (хотя он предлагает вам использовать боковые сноски вместо сносок, я думаю, что сноски более доступны, со ссылкой на сноску и сноской, за которой следует ссылка на текст, я подозреваю, что им было бы легче следовать с помощью screen reader).

Одна из ссылок со страницы quirksmode предлагает иметь стрелку,↩, после текста сноски, ссылающейся назад, и использовать entity ↩ для этот.

Например:

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">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote. <a href="#footnote-2-ref">&#8617;</a>
</p>

Я не уверен, как читатели экрана будут обращаться с сущностью. Ссылка на комментарий Grubber's post-это сообщение Боба истерна о доступности сносок , которое предполагает, что его не читают, хотя это было несколько лет назад, и я надеюсь, что читатели экрана улучшились бы к настоящему времени. Для обеспечения доступности может быть полезно использовать текстовый якорь, такой как "return to text", или, возможно, поместить его в атрибут заголовка ссылки. Это также может быть стоит поставить его на оригинальную сноску, хотя я не знаю, как читатели экрана справятся с этим.

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">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote.
      <a href="#footnote-2-ref" title="return to text">&#8617;</a>
</p>

(я только догадываюсь о проблемах доступности здесь,но поскольку это не было поднято ни в одной из статей, которые я упомянул, я подумал, что это стоит поднять. Если кто-то может говорить с большим авторитетом по этому вопросу, мне было бы интересно услышать.)

Сначала вы входите и ставите якорный тег с атрибутом name перед каждой сноской.

 <a name="footnote1">Footnote 1</a>
 <div>blah blah about stuff</div>

Этот якорный тег не будет ссылкой. Это будет просто именованный раздел страницы. Затем вы делаете маркер сноски тегом, который ссылается на этот именованный раздел. Для ссылки на именованный раздел страницы используется знак#.

 <p>So you can see that the candidate lied 
 <a href="#footnote1">[1]</a> 
 in his opening address</p>

Если вы хотите перейти в этот раздел с другой страницы, вы можете сделать это тоже. Просто свяжите страницу и прикрепите к ней название раздела.

 <p>For more on that, see 
 <a href="mypaper.html#footnote1">footnote 1 from my paper</a>
 , and you will be amazed.</p>

Вам нужно будет настроить якорные теги для всех ваших сносок. Префиксация их чем-то вроде этого должна сделать это:
[ 1 ]

Затем в теле вашей страницы, ссылка на сноску, как это:
[ 1 ]
(Обратите внимание на использование name против href атрибутов)

По существу, каждый раз, когда вы устанавливаете имя тега A, вы можете получить к нему доступ, связавшись с #ИМЯ-ИСПОЛЬЗУЕТСЯ-В-ТЕГЕ.

http://www.w3schools.com/HTML/html_links.asp имеет больше информации.

В вашем случае, вероятно, лучше всего делать это с тегами a-href и a-name в ваших ссылках и нижних колонтитулах соответственно.

В общем случае прокрутки к элементу DOM, есть jQuery плагин. Но если производительность является проблемой, я бы предложил сделать это вручную. Это включает в себя два шага:

1. нахождение положения элемента, на который выполняется прокрутка.
2. прокрутка до этой позиции.

Quirksmode дает хороший объяснение механизма, стоящего за первым. Вот мое предпочтительное решение:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

Он использует приведение от нуля до 0, что не соответствует этикету в некоторых кругах, но мне это нравится :) вторая часть использует window.scroll. Таким образом, остальная часть решения такова:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Вуаля!

Ответ Питера Боутона хорош, но было бы лучше, если бы вместо объявления сноски как "p" (абзац), Вы объявили как " li "(пункт списка) внутри "ol"(упорядоченный список):

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>

Таким образом, не нужно писать число сверху и снизу... пока ссылки перечислены в правильном порядке ниже.

Якорные теги, использующие именованные якоря

Http://www.w3schools.com/HTML/html_links.asp

Используйте закладки в тегах привязки...

    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>

Это основная часть моего содержания. У меня есть ссылка на сноску для этой строки [1]. Тогда у меня есть еще немного контента. Некоторые из них интересны, и в них также есть сноски [2].

[1] Вот моя первая сноска.

[2] Еще одна сноска.

---

Do text

И далее в сноске: text

Все без пробелов. Ссылка: http://www.w3schools.com/HTML/html_links.asp

Сноска

Бла бла

Перейти к сноске.