Как сделать навигацию в тексте по сноскам?
Вам нужны якоря.<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>
С помощью 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);
 }
});