Пара примеров как сделать плавную прокрутку к якорю в тексте на Jquery. В первом примере продемонстрирую простой способ перемещения к якорю. Во втором боле интересный момент, перемещение с отступом сверху.

Итак. Основной принцип перемещения основан на использовании функции animate(). На обработчик события click повесить функцию которая найдёт hash якоря и с заданным интервалом переместится к якорю. Всё достаточно просто.

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 500, function() {
          target.focus();
        });
        return false;
      }
     }
   });

Но если на сайте фиксированная шапка, она закроет якорь. Значит нужно добавить отступ.

Посчитаем высоту шапки:

headerHeight = $('.header').height() + 110;  

где .header - класс шапки, 110 - значение высоты, получаем экспериментально.

Добавим в первый пример новые вводные:

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      headerHeight = $('.header').height() + 110;  
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - headerHeight
        }, 500, function() {
          target.focus();
        });
        return false;
      }
     }
   });

где в строке получение значения текущей позиции вычтена высота шапки headerHeight.

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

<script type="text/jаvascript"> ...код... </script>