Представляю Вашему внимание прекрасный вариант скрипта для плавного перемещения по якорным ссылкам.
HTML
Для начала нужно просто создать ссылку и вместо пути указать якорь и знак решетка перед ним – #
1 | <a href="#yak1">Ссылка на якорь 1</a> |
Якорем будет блок с ID – #yak1.
Далее просто прописываем нужный элемент с нужным айди.
1 | <div id="yak1"></div> |
В примере выше – это простой div блок.
По сути, для простого перехода это все. При нажатии на такую ссылку, посетителя моментально перебросит на ту часть страницы где расположен блок с якорем.
Чтобы сделать переход по ссылкам плавным как в примере, ссылки нужно организовать в блок div с указанием ID.
В приведеном примере ниже – это блок div с ID prime_nav:
1 2 3 4 5 6 7 8 | <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.
1 | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> |
Убедитесь в том, что это уже не сделано ранее, чтобы не спровоцировать конфликт и неработоспособность скриптов.
Далее после библиотеки нужно вставить сам скрипт, который и будет осуществлять анимацию плавного перехода.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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 секунды.
Чтобы сама страница смотрела красиво, Вы можете добавить любые стили.