Плавна автоматична прокрутка (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>