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

Правильное решение: анимированная прокрутка с помощью jQuery

Ваша проблема в том, что метод .scroll() не предназначен для прокрутки к элементу — он лишь вызывает событие скролла. А window.scrollTo() работает, но без анимации. В jQuery есть отличный метод .animate(), который позволяет плавно изменять любое CSS-свойство, включая позицию скролла.

Базовое решение (jQuery):

$('#goTop').click(function() {
    $('html, body').animate({
        scrollTop: $('#footer').offset().top
    }, 800); // 800 мс — длительность анимации
});

Почему $('html, body')? Разные браузеры используют разные элементы для хранения scrollTop: Chrome использует body, Firefox — html. Указывая оба селектора, мы гарантируем кросс-браузерность.

Улучшенная версия с дополнительными параметрами:

$('#goTop').click(function() {
    var target = $('#footer');
    if (target.length) {
        $('html, body').stop().animate({
            scrollTop: target.offset().top - 50 // отступ 50px сверху, чтобы элемент не прилипал к краю
        }, {
            duration: 1000,
            easing: 'swing', // плавное ускорение/замедление
            complete: function() {
                console.log('Прокрутка завершена!');
            }
        });
    }
});

Альтернатива: чистый JavaScript с scrollIntoView

Современные браузеры поддерживают нативный метод element.scrollIntoView(). Он не требует jQuery:

document.getElementById('goTop').addEventListener('click', function() {
    document.getElementById('footer').scrollIntoView({
        behavior: 'smooth', // плавная прокрутка
        block: 'start'      // выравнивание по верхнему краю (start, center, end, nearest)
    });
});

Сравнение подходов:

• jQuery animate — максимальная гибкость (кастомная длительность, easing, отступы, callback). Работает во всех браузерах, включая старые IE.
• scrollIntoView — проще, без библиотек, но меньше контроля. Не поддерживается в IE/старых Edge.

Почему ваш код не работал:

• .scroll() — это метод для вызова события, а не для перемещения.
• window.scrollTo() без опций делает резкий скачок. Чтобы добавить анимацию, нужно использовать window.scrollTo({ top: value, behavior: 'smooth' }).

Рекомендую использовать jQuery-версию, если вы уже подключили библиотеку. Если проект новый и без jQuery — выбирайте scrollIntoView. Главное — не забывайте проверять, существует ли элемент, чтобы избежать ошибок.

/* Добавьте в CSS */
html {
    scroll-behavior: smooth;
}

// JavaScript
document.getElementById('goTop').addEventListener('click', function() {
    const footer = document.getElementById('footer');
    if (footer) {
        footer.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        });
    }
});

// Применить ко всем ссылкам с #
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
        }
    });
});