Scrollbar only with buttons or div

Question

Scrollbar only with buttons or div

Asked 5 years, 4 months ago

Viewed 811 times

1

Hello, I need to create two buttons that have the same function as a scroll, but without bar, I want to click and hold the button down the page, and when just a click, scroll down the page.

The same should be done in javascript and can use at most a Jquery.

I appreciate anyone who can help.

Follow the prototype below:

<!DOCTYPE html>
    <html lang="pt-br">
        <head>
            <meta charset="UTF-8">
            <title>Aparecida Nutrição</title>
            <link rel="icon" href="favicon.ico" type="image/x-icon">
            <link rel="stylesheet" type="text/css" href="css/reset.css">
            <link rel="stylesheet" type="text/css" href="css/index.css">
        </head>
        <body>

            <header>
                <div class="container">
                    <h1 class="teste">Aparecida Nutrição</h1>
                </div>
            </header>
            <div><div>
            <main>
                <button id="up">Up</button>
                <button id="down">Down</button>
                <section style="overflow: auto; height: 300px;" class="container">
                    <h2>Meus pacientes</h2>
                    <href class="scroll"/>
                    <table >
                        <thead>
                            <tr>
                                <th>Nome</th>
                                <th>Peso(kg)</th>
                                <th>Altura(m)</th>
                                <th>Gordura Corporal(%)</th>
                                <th>IMC</th>
                            </tr>
                            <tr class="paciente" >
                                <td class="info-nome">Paulo</td>
                                <td class="info-peso">100</td>
                                <td class="info-altura">2.00</td>
                                <td class="info-gordura">10</td>
                                <td class="info-imc">0</td>
                            </tr>

                            <tr class="paciente" >
                                <td class="info-nome">João</td>
                                <td class="info-peso">80</td>
                                <td class="info-altura">1.72</td>
                                <td class="info-gordura">40</td>
                                <td class="info-imc">0</td>
                            </tr>

                            <tr class="paciente" >
                                <td class="info-nome">Erica</td>
                                <td class="info-peso">54</td>
                                <td class="info-altura">1.64</td>
                                <td class="info-gordura">14</td>
                                <td class="info-imc">0</td>
                            </tr>
                        </thead>
                </table>

            </section>
        </main>
        <script src="js/calcula-imc.js"></script>
        <script src="js/form.js"></script>
        <script src="jquery-3.4.1.min.js"></script>
    </body>
</html>

Below the javascript (I have these two buttons to work with scroll up and down):

var up = document.getElementById("#up");
var down = document.getElementById("#down");

I have these functions to use:

up.addEventListener("click", function (event){

});

down.addEventListener("click", function (event){

});

Edit your question and put what you have of code, so it is easier to answer you, only with the image can not help you much

– hugocsl

2019/07/11 at 16:03
so help already?

– Matheus Berns

2019/07/11 at 16:28
Yes now the community has to vote to reopen it

– hugocsl

2019/07/11 at 16:46
@Matheusberns see if this code http://jsfiddle.net/s5mgX/1709/ help

– Guto Xavier

2019/07/12 at 19:03

1 answer

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.

by lmarzochi • 11 points · Answer 1 · 2019-07-28T00:58:40+00:00

You can use the window.scrollBy(a, b)

Receiving two parameters, the first is the measure in pixels for the horizontal scrolling and the second the vertical scrolling.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  height: 7500px;
  width: 5000px;
}

button {
  position: fixed;
  left: 300px
}
</style>
</head>
<body>

<h3>conteúdo aqui</h3>

<button onclick="scrollWin(0, 50)">Descer</button><br><br>

<button onclick="scrollWin(0, -50)">Subir</button><br><br>

<button onclick="scrollWin(100, 0)">Direita</button><br><br>

<button onclick="scrollWin(-100, 0)">Esquerda</button><br><br>

<script>
function scrollWin(x, y) {
  window.scrollBy(x, y);
}
</script>

</body>
</html>

source: Scroll the document inside the window by the given value.