Home How do I make a button in HTML work similarly to the scroll wheel on a mouse or like an arrow key when viewing a webpage?

Questions

How do I make a button in HTML work similarly to the scroll wheel on a mouse or like an arrow key when viewing a webpage?

byMR

February 6, 2024

I am trying to make a button in HTML/JS work the same as when scrolling the mouse wheel or when pressing an arrow key to navigate a webpage. I haven’t found any way to make this work correctly. I have tried using KeyboardEvent, and the webpage recognizes when the button simulates the arrow key button, but it does not actually scroll like the webpage would when clicking an arrow key. I suspect this may be because the arrow key scroll function may be a feature of the web browser and not built in functionality of a webpage. scrollTo() also does not work because it is intended to be non-specific to an element, as the HTML buttons are fixed to the bottom of the webpage at all times to act as on-screen navigation buttons for users. Essentially, I am trying to navigate to a section above or below the one currently in the viewport. Here is an example that demonstrates how the webpage looks, without the button functionality:

<!DOCTYPE html>
<html lang="en" style="scroll-snap-type: y mandatory;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            height: 100vh;
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

        button {
            position: fixed;
            bottom: 0;
            margin: 5rem;
            padding: 1rem;
        }
    </style>
</head>

<body>
    <section style="background-color: lightsteelblue;">
        <h1>Section 1</h1>
    </section>
    <section style="background-color: pink;">
        <h1>Section 2</h1>
    </section>
    <section style="background-color: lightseagreen;">
        <h1>Section 3</h1>
    </section>
    <button style="left:0">Down</button>
    <button style="right:0">Up</button>
</body>

</html>

Using scrollTo() did not work as it is (from my understanding) specific, so I was only able to scroll to a certain section.

Code similar to:

const upArrow = document.getElementById('upButton');

upArrow.addEventListener('click', function() {
    const arrowUpEvent = new KeyboardEvent('keydown', {
        key: 'ArrowUp',
        keyCode: 38,
        which: 38,
        bubbles: true,
    });
    document.dispatchEvent(arrowUpEvent);
});

also does not work, because while I do receive the alert when addEventListener('keydown', function(event) {if (event.key === 'ArrowUp') {alert('Arrow Up key pressed!'); is ran, the scroll down functionality of an arrow key in google chrome does not happen.

What I am expecting: When pressing one of the buttons, the webpage scrolls to the section above or below, or if there is no sections, the webpage scrolls a small amount up or down depending on what button is pressed.

>Solution :

Use ScrollBy instead of scrollTo to scroll the page up or down by a certain amount. You can calculate the amount to scroll based on the height of the viewport. And in this code the arrow keys work the buttons work and the scrollbar work.

const downButton = document.getElementById('downButton');
const upButton = document.getElementById('upButton');

downButton.addEventListener('click', function() {
    window.scrollBy(0, window.innerHeight); // Scroll down by one viewport height
});

upButton.addEventListener('click', function() {
    window.scrollBy(0, -window.innerHeight); // Scroll up by one viewport height
});

<!DOCTYPE html>
<html lang="en" style="scroll-snap-type: y mandatory;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            height: 100vh;
            scroll-snap-align: start;
            scroll-snap-stop: always;
        }

        button {
            position: fixed;
            bottom: 0;
            margin: 5rem;
            padding: 1rem;
        }
    </style>
</head>

<body>
    <section style="background-color: lightsteelblue;">
        <h1>Section 1</h1>
    </section>
    <section style="background-color: pink;">
        <h1>Section 2</h1>
    </section>
    <section style="background-color: lightseagreen;">
        <h1>Section 3</h1>
    </section>
    <button id="downButton" style="left:0">Down</button>
    <button id="upButton" style="right:0">Up</button>
</body>

</html>