Как вам известно, по нажатию на якорную ссылку нас перекидывает на ту часть страницы с которой эта ссылка связана. Сам переход происходит мгновенно и этот нюанс мы с Вами поправим.
Структура меню с якорными ссылками
Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться.
<nav id="menu"> <ul> <li><a href="#about">Обо мне</a></li> <li><a href="#blog">Мой блог</a></li> <li><a href="#services">Услуги</a></li> <li><a href="#contacts">Контакты</a></li> </ul> </nav>
Каждая ссылка ссылается на соответствующий блок:
<div id="content"> <section id="about"></section> <section id="blog"></section> <section id="services"></section> <section id="contacts"></section> </div>
Рабочий jQuery скрипт плавного перехода к нужному блоку
Итак нам нужно обработать нажатия по ссылкам в нашем меню, отменить стандартное поведение, выяснить на какой блок ссылается якорь и анимировать переход.
Этот скрипт должен быть подключен ниже подключения jQuery библиотеки.
$(document).ready(function(){ $("#menu").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); }); });