Плавный скролл по странице к нужному ID (Scroll to id)

Очень популярная функция на различных одностраничниках – плавный скролл к нужному элементу на этой же странице. Чаще всего используется при навигации по меню. Если использовать обычные якоря без js, то плавного скролла не будет.

Самый простой скрипт для плавного скроллинга к нужному элементу.

Используется jQuery, поэтому нужно подключить https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

Самый простой пример HTML:

<ul class="menu">
  <li><a href="#s1">Section 1</a></li>
  <li><a href="#s2">Section 2</a></li>
  <li><a href="#s3">Section 3</a></li>
  <li><a href="#s4">Section 4</a></li>
</ul>
<div class="wrap">
  <section class="section" id="s1">
    <h2>Section 1</h2>
  </section>
  <section class="section" id="s2">
    <h2>Section 2</h2>
  </section>
  <section class="section" id="s3">
    <h2>Section 3</h2>
  </section>
  <section class="section" id="s4">
    <h2>Section 4</h2>
  </section>
</div>

Скрипт jQuery:

$('a[href*="#"]').on('click', function (e) {
  e.preventDefault();

  $('html, body').animate({
    scrollTop: $($(this).attr('href')).offset().top
  }, 500, 'linear');
});

Рабочий пример:

See the Pen Easy scroll to id by Denis (@deniscreative) on CodePen.0

Пример простой и удобный, но есть у него минус – при скроллинге не отмечаются активные пункты меню, если вам это и не надо, то можно без проблем использовать этот код. Если же нужно, чтобы при прокрутке активный блок выделялся в меню, тогда лучше использовать скрипт PageScroll2id, подробнее в этой статье Плавный скроллинг по странице к нужному элементу с использованием плагина PageScroll2id.