Плавный скроллинг страницы до якоря

Как вам известно, по нажатию на якорную ссылку нас перекидывает на ту часть страницы с которой эта ссылка связана. Сам переход происходит мгновенно и этот нюанс мы с вами поправим.

Для того чтобы реализовать плавный переход после нажатия по ссылке, нам необходимо будет написать небольшое свой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 не наследуется, применяется к прокручиваемым блокам */ 
}