jQuery: Простая прокрутка до нужного элемента по клику

Реализация плавной прокрутки страницы при клике на элемент. Разберём три подхода: jQuery, чистый JavaScript и CSS.

Вариант с jQuery

При клике на элемент с ID callme страница плавно прокручивается к элементу с классом formwrap за 1000 миллисекунд:

$("#callme").click(function() {
  $('html, body').animate({
    scrollTop: $(".formwrap").offset().top
  }, 1000);
});

Вариант без jQuery

Для чистого JavaScript — альтернативный подход, который работает во всех браузерах и не требует дополнительных библиотек:

document.getElementById("callme").addEventListener("click", function (e) {
  e.preventDefault();
  document.querySelector(".formwrap").scrollIntoView({
    behavior: "smooth"
  });
});

CSS-решение

Для глобальной плавной прокрутки всего сайта можно использовать одну строку CSS. При таком подходе якорные ссылки будут прокручиваться плавно без дополнительного JavaScript:

html {
  scroll-behavior: smooth;
}