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