Как вам известно, по нажатию на якорную ссылку нас перекидывает на ту часть страницы с которой эта ссылка связана. Сам переход происходит мгновенно и этот нюанс мы с вами поправим.
Для того чтобы реализовать плавный переход после нажатия по ссылке, нам необходимо будет написать небольшой скрипт, который отследит момент нажатия, выяснит на какой блок ссылается якорь и плавно прокрутит страницу до нужного места. Но давайте обо всем по порядку
Структура меню с якорными ссылками
Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться, например:
у нас есть блока <div id="main">...</div>, внутренняя ссылка на этот блок будет иметь следующий вид: <a href="#main"></a>
Таким образом все ссылки ссылаются на ID блоков.
Вот и сам код меню из демо-примера:
<nav id="menu"> <ul> <li><a href="#ex1">Link #1</a></li> <li><a href="#ex2">Link #2</a></li> <li><a href="#ex3">Link #3</a></li> <li><a href="#ex4">Link #4</a></li> </ul> </nav>
Каждая ссылка ссылается на соответствующий блок:
<div id="content"> <section id="ex1"> ... </section> <div class="separator"></div> <section id="ex2"> ... </section> <div class="separator"></div> <section id="ex3"> ... </section> <div class="separator"></div> <section id="ex4"> ... </section> </div>
Скрипт плавного перехода к нужному блоку
Итак нам нужно обработать нажатия по ссылкам в нашем меню, отменить стандартное поведение, выяснить на какой блок ссылается якорь и анимировать переход.
$(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); }); });
Каждую строку скрипта я прокомментировал, если остались вопросы пиши в комментариях к посту - помогу.