Как сделать навигацию в тексте по сноскам?

Question

[m325]

Имеется такая разметка.

<div class="content">
	Загаловок <sup>[1]</sup>
	Загаловок <sup>[2]</sup>
	Загаловок <sup>[3]</sup>
		<div class="note_box">
			<sup><strong>[1]</storng></sup> Загаловок - это....
			<sup><strong>[2]</storng></sup> Загаловок - это....
			<sup><strong>[3]</storng></sup> Загаловок - это....
		</div>
</div>

Как сделать навигацию в ней? Чтобы из контента отбрасывало к примечанию.

Answer 1

[Евгений Бухарев]

С помощью jQuery вещаем обработчик клика на элементы .content > sup, далее выдергиваем оттуда контент, далее в .note_box ищем тег strong с контентом элемента по которому кликнули, и если элемент найден, то делаем плавную прокрутку к этому элементу. Писал на коленке, нужно проверить работоспособность кода

jQuery('body').on('click','.content > sup',function(){
var marker=jQuery(this).text();
var element=jQuery('.note_box strong:contains("'+marker+'")');
    
if (element.length != 0) {
jQuery('html, body').animate({scrollTop:element.offset().top }, 500);
 }
});

Comments

[m325]

Большое спасибо, все работает.

Answer 2

[Денис Инешин]

Вам нужны якоря.

<a href="#anchorName">Переход</a>
<a name="anchorName"></a> <!-- точка куда будет осуществлен переход -->

Вот так в общем:

<div class="content">
  Загаловок <sup><a href="#a1">[1]</a></sup>
  Загаловок <sup><a href="#a2">[2]</a></sup>
  Загаловок <sup><a href="#a3">[3]</a></sup>
    <div class="note_box">
      <sup><a name="a1"></a><strong>[1]</storng></sup> Загаловок - это....
      <sup><a name="a2"></a><strong>[2]</storng></sup> Загаловок - это....
      <sup><a name="a3"></a><strong>[3]</storng></sup> Загаловок - это....
    </div>
</div>

Comments

[m325]

Спасибо, я это понимаю видимо плохо сформулировал. Вопрос. Как сделать так чтобы эти, якоря добавлялись сами. Я не селен в jQuery, можете подсказать как это можно организовать.

[Денис Инешин]

m325: дык, причем тут jQuery, вы должны добавить их на сервере, там же где формируете разметку.

[m325]

Денис Инешин: Текстов с выше 2 тысячи, у меня нет возможности править разметку. По этому, спрашиваю о jQuery. Я в не селен. в jQuery, только учусь. Можно $('.content sup').html('a#nameAncor') как то так...?

[Денис Инешин]

m325: Какая разница сколько текстов, они ведь на сервере собираются, разве нет?