Плавный переход по якорным ссылкам

Представляю Вашему внимание прекрасный вариант скрипта для плавного перемещения по якорным ссылкам.

✪ DEMO

HTML

Для начала нужно просто создать ссылку и вместо пути указать якорь и знак решетка перед ним – #

<a href="#yak1">Ссылка на якорь 1</a>

Якорем будет блок с ID – #yak1.
Далее просто прописываем нужный элемент с нужным айди.

<div id="yak1"></div>

В примере выше – это простой div блок.
По сути, для простого перехода это все. При нажатии на такую ссылку, посетителя моментально перебросит на ту часть страницы где расположен блок с якорем.

Чтобы сделать переход по ссылкам плавным как в примере, ссылки нужно организовать в блок div с указанием ID.
В приведеном примере ниже – это блок div с ID prime_nav:

<nav id="prime_nav">
    <ul>
        <li><a href="#yak1">Ссылка на якорь 1</a></li>
        <li><a href="#yak2">Ссылка на якорь 2</a></li>
        <li><a href="#yak3">Ссылка на якорь 3</a></li>
        <li><a href="#yak4">Ссылка на якорь 4</a></li>
    </ul>
</nav>

jQuery

В шапку перед закрывающимся head или в подвал перед закрывающимся body нужно подключить библиотеку jQuery.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Убедитесь в том, что это уже не сделано ранее, чтобы не спровоцировать конфликт и неработоспособность скриптов.

Далее после библиотеки нужно вставить сам скрипт, который и будет осуществлять анимацию плавного перехода.

<script type="text/javascript">  
$(document).ready(function(){

        //ID блока с ссылками #prime_nav
 $("#prime_nav").on("click","a", function (event) {
  //отменяем стандартную обработку нажатия по ссылке
  event.preventDefault();

  //забираем идентификатор бока с атрибута href
  var id  = $(this).attr('href'),

  //узнаем высоту от начала страницы до блока на который ссылается якорь
   top = $(id).offset().top;
  
  //анимируем переход на расстояние - top за 1500 мс
  $('body,html').animate({scrollTop: top}, 1500);
 });
});
 </script>

– в пятой строке нужно указать ID блока ссылок. В примере это #prime_nav;
– в шестнадцатой строке – время задержки в миллисекундах – 1500, что равно 1,5 секунды.

Чтобы сама страница смотрела красиво, Вы можете добавить любые стили.