Scrollbar only with buttons or div

Asked

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:

inserir a descrição da imagem aqui

<!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){

});
javascript html jquery css

  • 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

  • so help already?

  • Yes now the community has to vote to reopen it

  • @Matheusberns see if this code http://jsfiddle.net/s5mgX/1709/ help

1 answer

1

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.

  • Gee, I didn’t know there was such a simple way to do that, it really helped. I had left that function aside for now, but now I’m going to implement it, thanks!!

  • Glad you could help @Matheusberns!

Browser other questions tagged javascript html jquery css

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