Плавная прокрутка до блока по клику

Как по нажатию кнопки плавно прокрутить страницу к нужному блоку: якорная ссылка с CSS, scrollIntoView и вариант на jQuery.

Классический приём для лендингов: кнопка «Оставить заявку» в первом экране плавно прокручивает страницу к форме.

Без JavaScript

<a href="#request" class="button">Оставить заявку</a>
…
<section id="request">…</section>
html { scroll-behavior: smooth; }
#request { scroll-margin-top: 80px; }   /* отступ под закреплённую шапку */

scroll-margin-top решает частую проблему: блок не уезжает под закреплённое меню.

JavaScript: scrollIntoView

document.querySelector('#button-scroll').addEventListener('click', function () {
  document.querySelector('#scroll_to_id').scrollIntoView({ behavior: 'smooth', block: 'start' });
});

jQuery с настраиваемой длительностью

$('#button-scroll').on('click', function () {
  const top = $('#scroll_to_id').offset().top;
  $('html, body').animate({ scrollTop: top }, 800);
});

Длительность задаётся в миллисекундах. Больше секунды делать не стоит — посетитель начинает ждать.

Все статьи

Расскажите о задаче — подберём платформу и оценим работу

Обсудить проект