Плавный скролл js (плавная прокрутка меню)

Часто на длинных лендингах требуется быстрая прокрутка до нужного блока или секции без перехода на другую страницу. Например посетитель заинтересовался услугой и ему вот прям срочно нужно узнать цены или контакты или отзывы.

Для этого в фиксированной шапке сайта размещают меню с ссылками на якоря у нужных блоков для быстрого скролла из меню. Самый простой способ — присвоить id к нужному блоку и в ссылке разместить указатель на него через #.

Например:

<a href="#section1" class="menu-link">Link1</a>

Это сработает НО! переход на блок будет мгновенный. Это достаточно неприятно для глаз пользователя да и не очень эстетично)
Гораздо интереснее выглядит плавный скролл меню до блока.

Рассмотрим пример плавной прокрутки меню. Для этого создаем простую разметку с фиксированным меню и несколькими секциями. Каждая секция имеет свой уникальный id. В меню ссылки ссылаются на соответствующие id.

  <header class="header">
    <div class="container">
      <nav id="menu" class="menu">
        <a href="#section1" class="menu-link">Link1</a>
        <a href="#section2" class="menu-link">Link2</a>
        <a href="#section3" class="menu-link">Link3</a>
        <a href="#section4" class="menu-link">Link4</a>
      </nav>
    </div>
  </header>
  <section id="section1">
    <h2>Section1</h2>
  </section>
  <section id="section2">
    <h2>Section2</h2>
  </section>
  <section id="section3">
    <h2>Section3</h2>
  </section>
  <section id="section4">
    <h2>Section4</h2>
  </section>

Добавим немного стилей css для наглядности. Меню фиксируем наверху. Секциям выставляем высоту 100vh (равно высоте экрана устройства) и раскрашиваем разными цветами.

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}
.menu {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
section {
  height: 100vh;
}
#section1 {
  background-color: #fff;
}
#section2 {
  background-color: #eee;
}
#section3 {
  background-color: #ddd;
}
#section4 {
  background-color: #ccc;
}

Ну и главная фишка плавного скролла — JS код плавной прокрутки

$("a.menu-link").on("click", function (event) { // отлавливаем событие клика на ссылку

  event.preventDefault(); // отменяем стандартное действие клика на ссылку

  var id  = $(this).attr('href'), // определяем переменную id из аттрибута href ссылки

  top = $(id).offset().top; // определяем позицию элемента от верхнего края документа

  $('body,html').animate({scrollTop: top}, 500); // магия jquery - плавная прокрутка (500 - время в мс)
});

По JS каждая строка прокомментирована в коде, поэтому даже нечего добавить)))

Не забывайте что скрипт работает только когда на странице подключена библиотека jQuery!

Полный код работающего примера можно посмотреть в моем Codepen.