How to Automate Infinite Browser Scrolling in Background Using Javascript to Save Time & Work

How to Create a Super Fast Auto Scroll with JavaScript: A Step-by-Step Guide

In this tutorial, we’ll walk through how to create a super fast auto-scrolling script using JavaScript. This script will allow you to scroll through web pages automatically at a maximum speed. Perfect for automating tasks like reading long pages, testing infinite scroll, or speeding up browsing.

Let’s break down the entire process into easy-to-understand steps!

1. Setting Up the Basic Structure

The script begins by defining two key variables:

let scrollInterval;
let scrolling = false;

1 2	let scrollInterval; let scrolling = false;

scrollInterval will hold the interval ID, which is used to stop the scrolling once it’s started.
scrolling is a boolean variable that checks whether the scrolling process is currently running or not. It ensures that multiple intervals aren’t created accidentally.

2. Creating a Button with JavaScript

Next, we need a function to create a button on the webpage. This button will allow users to start and stop the scrolling.

function createButton(text, top, onClick, id) {
    let button = document.createElement("button");
    button.innerText = text;
    button.style.position = "fixed";
    button.style.top = top + "px";
    button.style.right = "20px";
    button.style.zIndex = "9999";
    button.style.padding = "10px 15px";
    button.style.backgroundColor = "#007BFF";
    button.style.color = "white";
    button.style.border = "none";
    button.style.borderRadius = "5px";
    button.style.cursor = "pointer";
    button.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";
    button.id = id;
    button.onclick = onClick;
    document.body.appendChild(button);
}

function createButton(text, top, onClick, id) {

let button = document.createElement("button");

button.innerText = text;

button.style.position = "fixed";

button.style.top = top + "px";

button.style.right = "20px";

button.style.zIndex = "9999";

button.style.padding = "10px 15px";

button.style.backgroundColor = "#007BFF";

button.style.color = "white";

button.style.border = "none";

button.style.borderRadius = "5px";

button.style.cursor = "pointer";

button.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";

button.id = id;

button.onclick = onClick;

document.body.appendChild(button);

}

Explanation of the Button Creation:

document.createElement("button"): This creates a new button element in the DOM.

button.style properties: These define the button’s appearance, including its position, color, size, and shadow. We’re using position: fixed to ensure the button stays in place on the screen, regardless of scrolling.
button.onclick function: This assigns the function to execute when the button is clicked. We’ll pass in functions to start and stop the scrolling.
document.body.appendChild(button): This adds the button to the webpage, so it becomes visible.

We will use this function to create two buttons: one to start scrolling and another to stop it.

3. Starting the Scrolling Process

Next, we define the function to start the scrolling:

function startScrolling() {
    if (!scrolling) {
        scrolling = true;
        scrollInterval = setInterval(() => {
            window.scrollBy(0, 100); // Maximum speed: increase step size
        }, 1); // Reduce interval time to 1ms
    }
}

function startScrolling() {

if (!scrolling) {

scrolling = true;

scrollInterval = setInterval(() => {

window.scrollBy(0, 100); // Maximum speed: increase step size

}, 1); // Reduce interval time to 1ms

}

Explanation of the Start Scrolling Function:

if (!scrolling) { ... }: This checks if the scrolling process is already happening. If not, it proceeds with starting the scroll.

scrolling = true;: This ensures that the scrolling is marked as active.
setInterval(() => { window.scrollBy(0, 100); }, 1);:
- setInterval: Calls the scroll function every 1ms.
- window.scrollBy(0, 100);: This scrolls the page 100 pixels downward per interval. The higher the number (100), the faster the scroll. If you wanted to make it even faster, you could increase the number.
1 (the second argument in setInterval): This defines the speed of the scrolling. The smaller the number (like 1ms), the faster the scroll.

4. Stopping the Scrolling Process

We also need a function to stop the scrolling when required:

function stopScrolling() {
    clearInterval(scrollInterval);
    scrolling = false;
}

function stopScrolling() {

clearInterval(scrollInterval);

scrolling = false;

}

Explanation of the Stop Scrolling Function:

clearInterval(scrollInterval);: This stops the interval set by setInterval, effectively stopping the scrolling.

scrolling = false;: This resets the scrolling state to false, indicating that scrolling has been stopped.

5. Creating the Buttons for Start and Stop

Now, we need to call the createButton function to create the Start Scroll and Stop Scroll buttons:

createButton("Start Scroll", 50, startScrolling, "startScrollBtn");
createButton("Stop Scroll", 100, stopScrolling, "stopScrollBtn");

1 2	createButton("Start Scroll", 50, startScrolling, "startScrollBtn"); createButton("Stop Scroll", 100, stopScrolling, "stopScrollBtn");

Explanation:

The “Start Scroll” button is placed at a position 50px from the top of the screen, and it’s tied to the startScrolling function.
The “Stop Scroll” button is placed at 100px from the top and is connected to the stopScrolling function.

Putting It All Together

Here’s the complete code once again:

(function () {
    let scrollInterval;
    let scrolling = false;

    function createButton(text, top, onClick, id) {
        let button = document.createElement("button");
        button.innerText = text;
        button.style.position = "fixed";
        button.style.top = top + "px";
        button.style.right = "20px";
        button.style.zIndex = "9999";
        button.style.padding = "10px 15px";
        button.style.backgroundColor = "#007BFF";
        button.style.color = "white";
        button.style.border = "none";
        button.style.borderRadius = "5px";
        button.style.cursor = "pointer";
        button.style.boxShadow = "0 4px 6px rgba(0, 0, 0, 0.1)";
        button.id = id;
        button.onclick = onClick;
        document.body.appendChild(button);
    }

    function startScrolling() {
        if (!scrolling) {
            scrolling = true;
            scrollInterval = setInterval(() => {
                window.scrollBy(0, 100000000000); // Maximum speed: increase step size
            }, 1); // Reduce interval time to 1ms
        }
    }

    function stopScrolling() {
        clearInterval(scrollInterval);
        scrolling = false;
    }

    createButton("Start Scroll", 50, startScrolling, "startScrollBtn");
    createButton("Stop Scroll", 100, stopScrolling, "stopScrollBtn");
})();

(function () {

let scrollInterval;

let scrolling = false;