Как плавно прокрутить страницу к нужному элементу с помощью jQuery?

Решение с использованием jQuery.animate()

Самый простой и надёжный способ — анимировать свойство scrollTop у элемента html или body. jQuery умеет плавно изменять числовые CSS-свойства, а scrollTop как раз является таким свойством.

Вот базовый пример:

// Находим целевой элемент и получаем его позицию относительно верха страницы
var targetOffset = $('#success-message').offset().top;

// Анимируем прокрутку
$('html, body').animate({
    scrollTop: targetOffset
}, 800); // 800 миллисекунд — длительность анимации

Почему нужно указывать и html, и body?

В разных браузерах прокрутка может быть привязана к разным элементам. В Chrome и Safari — к body, в Firefox и старых версиях IE — к html. Указывая оба селектора, мы гарантируем, что анимация сработает везде.

Полный пример с обработчиком клика

$('#submit-btn').on('click', function() {
    // Ваша логика отправки данных
    // После успешного ответа сервера:
    
    var $target = $('#success-message');
    if ($target.length) { // Проверяем, существует ли элемент
        $('html, body').animate({
            scrollTop: $target.offset().top - 20 // 20px отступа сверху для красоты
        }, 600);
    }
});

Современный JavaScript (без jQuery) — метод scrollIntoView()

Если вы не хотите использовать jQuery, современные браузеры поддерживают нативный метод scrollIntoView() с опцией behavior: 'smooth':

document.getElementById('success-message').scrollIntoView({
    behavior: 'smooth',
    block: 'start' // или 'center', 'end'
});

Важно: Этот метод не поддерживается в Internet Explorer и старых версиях Safari (до 15.4). Для максимальной совместимости лучше использовать jQuery-подход.

Дополнительные советы

• Отступы: Если нужно оставить место сверху (например, чтобы не перекрывать фиксированную шапку), вычтите высоту шапки из targetOffset.
• Проверка существования элемента: Всегда проверяйте, что элемент найден (if ($target.length)), иначе анимация улетит в начало страницы.
• Остановка предыдущей анимации: Если пользователь быстро кликает несколько раз, вызовите .stop(true, true) перед новой анимацией, чтобы избежать накопления очереди:

$('html, body').stop(true, true).animate({
    scrollTop: targetOffset
}, 600);

Этот подход работает во всех браузерах, совместимых с jQuery (IE9+), и не требует дополнительных плагинов. Используйте его в своих проектах смело!

// Подключаем плагин:
// <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>

// Использование:
$.scrollTo('#success-message', {
    duration: 600,
    offset: -50, // отступ сверху
    easing: 'swing' // или 'linear'
});