Плавная автоматическая прокрутка (scroll) веб-страницы на Javascript

Предлагаю вашему вниманию готовый код JS, который реализовывает плавную автоматическую прокрутку страницы сверху вниз. Кроме того, в коде можно указать время задержки, после которой веб-страница начнёт прокручиваться. То есть, после загрузки страницы в браузере, пройдёт определенное время и только после этого начнется плавный скроллинг без участия пользователя. А еще можно добавить кнопку, чтобы прокрутка начиналась только после того как пользователь щёлкнет по ней.

Такая функция создает динамический эффект, который помогает управлять вниманием посетителей и улучшает общий впечатление от просмотра сайта.

Зачем может понадобиться автоматическая плавная прокрутка на сайте

1. Привлечение внимания. Автоматический скроллинг может привлекать внимание пользователя к важным блокам на странице. Например, если у вас есть промоакция или важный анонс, то плавный переход к нему сделает взаимодействие более естественным.
2. Автоматизированное ознакомление с контентом. На информационных и корпоративных сайтах автоматический scroll может использоваться для презентации услуг, портфолио или истории компании. Он позволяет создать эффект «живой» страницы, которая как бы сама знакомит пользователя с её содержимым.
3. Улучшение UX (User Experience – Пользовательский опыт). Когда пользователь читает длинный текст или просматривает визуальный контент, автоматический скроллинг помогает плавно перемещать этого человека по странице, не заставляя вручную прокручивать экран. Это особенно актуально для страниц с большим количеством секций, таких как лендинги и презентации.
4. Демонстрация контента без взаимодействия. В киосках самообслуживания, электронных витринах или интерактивных информационных панелях автоматический скроллинг позволяет демонстрировать контент без необходимости нажимать кнопки или листать экран.
5. Автоматическая загрузка контента. В социальных сетях и на новостных сайтах эта технология используется для подгрузки новых записей во время просмотра. Она создаёт эффект непрерывного потока информации, что удерживает пользователя на сайте дольше.

Благодаря автоматическому скроллингу веб-страницы могут стать более удобными, динамичными и интерактивными. Однако важно использовать его разумно, чтобы он не создавал дискомфорт для пользователей.

Иногда лучше дать пользователю самому решать запускать скроллинг или нет. А иногда есть смысл автоматически всё запустить без участия пользователя. Поэтому предлагаю вам оба варианта кода.

Автоматическая прокрутка веб-страницы через заданный промежуток времени

document.addEventListener("DOMContentLoaded", () => { // Выполняется после полной загрузки HTML-документа
    setTimeout(() => { // Задержка на 10 секунд перед началом прокрутки
        let start = window.scrollY; // Текущая позиция прокрутки
        let end = document.body.scrollHeight; // Высота всего документа (конечная точка прокрутки)
        let duration = 100000; // Продолжительность прокрутки в миллисекундах (10 секунд)
        let startTime = null; // Время начала анимации

        function smoothScroll(currentTime) { // Функция для плавного прокручивания
            if (!startTime) startTime = currentTime; // Устанавливаем начальное время во время первого вызова
            let timeElapsed = currentTime - startTime; // Вычисляем время, которое прошло
            let progress = Math.min(timeElapsed / duration, 1); // Определяем прогресс (от 0 до 1)
            window.scrollTo(0, start + (end - start) * progress); // Меняем позицию прокрутки в соответствии с прогрессом
            if (progress < 1) requestAnimationFrame(smoothScroll); // Продолжаем анимацию, пока не достигнем конца
        }

        requestAnimationFrame(smoothScroll); // Запускаем анимацию
    }, 10000); // Ждём 10 секунд перед выполнением кода
});

Плавная прокрутка веб-страницы после клика по кнопке

Кнопка на HTML:

<button id="scrollButton">Начать скроллинг</button>

Код JS:

    // Добавляем обработчик события, который выполнится после полной загрузки HTML-документа
    document.addEventListener("DOMContentLoaded", () => { 
        // Получаем кнопку по её идентификатору
        const button = document.getElementById("scrollButton");

        // Добавляем обработчик события нажатия на кнопку
        button.addEventListener("click", () => { 
            let start = window.scrollY; // Получаем текущую позицию прокрутки
            let end = document.body.scrollHeight; // Определяем высоту всего документа (конечная точка прокрутки)
            let duration = 3000; // Устанавливаем длительность анимации прокрутки в миллисекундах (3 секунды)
            let startTime = null; // Переменная для сохранения времени начала анимации

            // Функция для плавного прокручивания
            function smoothScroll(currentTime) { 
                if (!startTime) startTime = currentTime; // Устанавливаем начальное время во время первого вызова
                let timeElapsed = currentTime - startTime; // Вычисляем время, прошедшее с момента старта
                let progress = Math.min(timeElapsed / duration, 1); // Определяем прогресс (от 0 до 1)
                
                // Прокручиваем страницу на соответствующую часть расстояния от начальной до конечной точки
                window.scrollTo(0, start + (end - start) * progress); 

                // Если анимация еще не завершена, вызываем requestAnimationFrame снова
                if (progress < 1) requestAnimationFrame(smoothScroll); 
            }

            // Запускаем анимацию прокрутки
            requestAnimationFrame(smoothScroll);
        });
    });

Остановка автопрокрутки

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Автоматический скроллинг</title>
    <style>
        body {
            height: 2000px; /* Добавляем высоту страницы для тестирования прокрутки */
        }
        .buttons {
            position: fixed;
            top: 20px;
            left: 20px;
            display: flex;
            gap: 10px;
        }
        button {
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <div class="buttons">
        <button id="scrollButton">Начать скроллинг</button>
        <button id="stopButton">Остановить скроллинг</button>
    </div>
	
    <script>
        let scrolling = false; // Переменная для контроля анимации
        let animationFrame; // Переменная для сохранения ID анимационного кадра

        document.addEventListener("DOMContentLoaded", () => {
            const scrollButton = document.getElementById("scrollButton");
            const stopButton = document.getElementById("stopButton");

            scrollButton.addEventListener("click", () => {
                if (scrolling) return; // Если уже выполняется прокрутка, не запускаем её повторно
                scrolling = true;

                let start = window.scrollY;
                let end = document.body.scrollHeight;
                let duration = 3000;
                let startTime = null;

                function smoothScroll(currentTime) {
                    if (!scrolling) return; // Проверяем, нужно ли остановить анимацию
                    if (!startTime) startTime = currentTime;
                    let timeElapsed = currentTime - startTime;
                    let progress = Math.min(timeElapsed / duration, 1);
                    window.scrollTo(0, start + (end - start) * progress);
                    if (progress < 1) {
                        animationFrame = requestAnimationFrame(smoothScroll);
                    } else {
                        scrolling = false; // Сбрасываем статус после завершения прокрутки
                    }
                }

                animationFrame = requestAnimationFrame(smoothScroll);
            });

            stopButton.addEventListener("click", () => {
                scrolling = false; // Меняем статус, чтобы остановить прокрутку
                cancelAnimationFrame(animationFrame); // Отменяем следующий кадр анимации
            });
        });
    </script>

</body>
</html>