Анимированный скролл до элемента с помощью jQuery

В веб-разработке часто встречается задача прокрутки страницы до конкретного элемента. Например, при нажатии на кнопку «Наверх» страница должна плавно прокручиваться вверх, а при нажатии на кнопку «Вниз» — вниз. Решение этой задачи возможно с помощью библиотеки jQuery. Данная статья посвящена решению этой задачи без использования дополнительных плагинов.

В качестве примера рассмотрим простую веб-страницу с двуми элементами: текстовым полем и кнопкой отправки формы. Предположим, что при нажатии на текстовое поле страница должна плавно прокручиваться до кнопки отправки формы.

Пример HTML-разметки для этого случая:

<input type="text" class="textfield" id="subject">
<!-- Здесь могут быть другие элементы -->
<input type="submit" class="submit" id="submit" value="Ok, Done.">

Для решения поставленной задачи можно использовать метод .animate() библиотеки jQuery. Этот метод позволяет создавать анимации на основе изменения CSS-свойств.

Сначала необходимо выбрать элемент, при клике на который будет происходить прокрутка. В данном случае это текстовое поле с идентификатором subject. Затем добавляем обработчик события click, внутри которого вызываем метод .animate().

$('#subject').on('click', function() {
  // код анимации
});

Внутри метода .animate() необходимо указать CSS-свойство, которое будет изменяться в процессе анимации, и продолжительность анимации. В данном случае изменяется свойство scrollTop, которое отвечает за вертикальную прокрутку элемента, а продолжительность анимации, например, может составлять 800 миллисекунд.

$('#subject').on('click', function() {
  $('html, body').animate({
    scrollTop: $("#submit").offset().top
  }, 800);
});

Метод .offset().top возвращает вертикальное смещение элемента с идентификатором submit относительно начала документа. Таким образом, при прокрутке страницы до этого элемента страница будет прокручиваться до нижней части страницы.

Этот код позволяет реализовать плавную прокрутку страницы до элемента с идентификатором submit при клике на элемент с идентификатором subject. Анимация прокрутки будет происходить в течение 800 миллисекунд.