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

теги привязки с использованием именованных привязок

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

Дайте контейнеру идентификатор, а затем используйте # для ссылки на этот идентификатор.

например

<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>

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

    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] Еще одна сноска.

Сделайте <a href = # tag> текст </ a>

а затем в сноске: <a name = "tag"> текст </ a>

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

<a name="1"> Сноска </a>

бла бла

<a href="#1"> перейти </a> к сноске.

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

 <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>

Вам нужно будет установить теги привязки для всех ваших сносок. Приставив к ним что-то вроде этого, должно получиться:
<a name = "FOOTNOTE-1"> [1] </ a>

Затем в основной части своей страницы добавьте ссылку на сноску, например:
. <a href = "# FOOTNOTE-1"> [1] </ a>
(обратите внимание на использование атрибутов имя и href)

По сути, каждый раз, когда вы устанавливаете имя тега A, вы можете получить к нему доступ, указав ссылку на # NAME-USED-IN-TAG.

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

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

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

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

например.:

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, Сообщение Боба Истерна о доступности сносок предполагает, что он не читается, хотя это было несколько лет назад, и я надеюсь, что программы чтения с экрана к настоящему времени улучшились. Для доступности может быть полезно использовать текстовую привязку, такую ​​как «возврат к тексту», или, возможно, поместить ее в атрибут заголовка ссылки. Также, возможно, стоит добавить его в исходную сноску, хотя я не знаю, как программы чтения с экрана справятся с этим.

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>

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

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

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

1. Определение позиции элемента, к которому вы прокручиваете.
2. Прокрутка до этой позиции.

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

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

Он использует приведение от нуля к нулю, что в некоторых кругах не соответствует этикету, но мне это нравится :) Во второй части используется 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>

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