Плавный скролл после нажатия на якорную ссылку
Как вам известно, по нажатию на якорную ссылку нас перекидывает на ту часть страницы с которой эта ссылка связана. Сам переход происходит мгновенно и этот нюанс мы с вами поправим.
Для того чтобы реализовать плавный переход после нажатия по ссылке, нам необходимо будет написать небольшой скрипт, который отследит момент нажатия, выяснит на какой блок ссылается якорь и плавно прокрутит страницу до нужного места. Но давайте обо всем по порядку
1. Структура меню с якорными ссылками
Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться, например:
у нас есть блока <div id=”main”>…</div>, внутренняя ссылка на этот блок будет иметь следующий вид: <a href=”#main”></a>
Таким образом все ссылки ссылаются на ID блоков.
Вот и сам код меню из демо-примера:
1 2 3 4 5 6 7 8 | <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> |
Каждая ссылка ссылается на соответствующий блок:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <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> |
2. Скрипт плавного перехода к нужному блоку
Для начала в шапку перед закрывающимся 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 | $(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); }); }); |
Источник