Плавный переход по якорной ссылке

Ни для кого не секрет, что при использовании на сайте статей объемного содержания, текст необходимо грамотно сформировать и структурировать. Это делается для удобства изучения и усвоения информации пользователем, в противном случае статью могут проигнорировать из-за её плохой читабельности. В этом помогает использование тегов h2 и h3, а также использование навигации с применением якорных ссылок. Ниже представлен пример таких ссылок.

Что такое якорная ссылка

Якорь - метка с уникальным идентификатором, которую размещают в определенном месте веб-страницы. Данная метка предназначена для быстрого перехода к ней при нажатии на специальную якорную ссылку. В основном якоря используются в заголовках h2 и h3, однако некоторые веб-мастера используют их еще и в самом тексте материала.

Как сделать якорную ссылку

Рассмотрим два варианта размещения якорей, в заголовках и в тексте материала:

/*Якорь в заголовке h2, название уникального идентификатора nav1*/
<h2 id="nav1">Заголовок</h2>
/*Якорь в тексте, название уникального идентификатора nav2*/
<span id="nav2">Текст</span>

Якоря выставлены, осталось прикрепить к ним якорные ссылки, которые при нажатии на них переместят пользователя к метке с определенным идентификатором.

/*Якорная ссылка для идентификатора nav1*/
<a href="#nav1">Якорная ссылка для заголовка</a>
/*Якорная ссылка для идентификатора nav2*/
<a href="#nav2">Якорная ссылка для текста</a>

Как реализовать плавную прокрутку к якорю