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

Сегодня делюсь с вами очень простым и удобным скриптом на jQuery, который по клику на элемент плавно прокручивает вас до заданного места на странице.

Сосбственно код:

<script>
$("#callme").click(function() { // ID откуда кливаем
 $('html, body').animate({
 scrollTop: $(".formwrap").offset().top // класс объекта к которому приезжаем
 }, 1000); // Скорость прокрутки
});
</script>

Вариант без jQuery

А если хочется обойтись без jQuery и сделать всё на чистом JavaScript — вот как это выглядит:

<script>
document.getElementById("callme").addEventListener("click", function (e) {
  e.preventDefault(); // если это ссылка, чтобы не было прыжка
  document.querySelector(".formwrap").scrollIntoView({
    behavior: "smooth"
  });
});
</script>

Работает во всех браузерах. И выглядит даже почище, чем jQuery вариант, никакой магии, просто слушаем клик и говорим «прокрутись красиво».

Кстати, если хочется, чтобы вся прокрутка на сайте всегда была плавной, можно вообще обойтись без скриптов и задать глобально в CSS и дальше использовать якорные ссылки в html:

html {
  scroll-behavior: smooth;
}