После клика по ссылке будет происходить плавный скролл до элемента. Рассмотрим сначала пример плавного перехода от секции к секции

Плавный скролл от секции к секции

Сначала сделаем обычный переход к секции.

Добавим id секциям к которым мы хотим выполнять скролл, а ссылкам атрибут href в формате #name. Решетка - означает идентификатор (id), а name - имя идентификатора.

Напишим следующий код в HTML файле

<section class="first" id="element2">
  <a href="#element">Ссылка-1</a>
</section>
<section class="third" id="element">
  <a href="#element2">Ссылка-2</a>
</section>

Теперь добавим плавности с помощью jQuery. В js-файле напишим код

$(document).ready(function(){
  $("#element, #element2").on("click","a", function (event) {
  event.preventDefault();
  var id  = $(this).attr('href'),
  top = $(id).offset().top;
    $('body,html').animate({scrollTop: top}, 1666);
  });
});

See the Pen Scroll to by Nikolay (@SoldatovNikolay) on CodePen.

Плавный скролл от ссылки меню

Создадим меню навигации и секции в HTML файле.

<nav>
  <ul id="your-id">
    <li>
      <a href="#sec1">Link-one</a>
    </li>
    <li>
      <a href="#sec2">Link-two</a>
    </li>
    <li>
      <a href="#sec3">Link-three</a>
    </li>
  </ul>
</nav>
<section id="sec1">First section</section>
<section id="sec2">Second section</section>
<section id="sec3">Third section</section>

В javascript заменим только id, остальной код останется без изменений (как в предыдущем примере).

$("#your-id").on("click","a", function (event)

See the Pen yEgYda by Nikolay (@Only-to-top) on CodePen.