1

Gostaria de adicionar uma espécie de rolagem automática em meu html, com botões de start e stop, e não sei como fazer.

Gostaria que ao clicar em start, o atributo rolasse até abaixo lentamente, e ao clicar em stop, parasse onde estivesse.
Um bom exemplo desse serviço está no "auto rolagem" de cifras, do Cifra Club.

Me desculpem, sou iniciante. Desde já agradeço.

2
  • Cara vc tem que usar id nas tags que deseja ser pontos de rolagem e usar jQuery(mais fácil que Javascript puro) para fazer o efeito de scroll.
    – LeAndrade
    Commented 20/01/2018 às 17:51
  • Como eu poderia chegar a esse resultado? Você pode dar um exemplo? Commented 20/01/2018 às 18:38

2 Respostas 2

4

Utilizando VanillaJS

Para fazer esse efeito é bastante simples, basta utilizar o método window.scroll.

Com esse método você pode alterar as coordenadas X e Y. Ex:

window.scroll(x-coord, y-coord);

Pronto! Não tem segredos.

Caso você queira algo menos "travado", você pode utilizar o método window.requestAnimationFrame

Para pausar basta armazenar o ID retornado pela função requestAnimationFrame e utiliza-lo na função cancelAnimationFrame.

Segue exemplo:

let scrollPosition = 0;
const velocity = 2;
let animation; //Armazena o ID da animação. Isso servirá para quando quiser pausa-la.

/* Botão para iniciar animação */
document.querySelector("#play").addEventListener("click", () => {
  rolarPagina("#cifra2")
});

/* Botão para pausar animação */
document.querySelector("#pause").addEventListener("click", () => {
  cancelAnimationFrame(animation)
});

/* Função para rolar a página */
function rolarPagina(element) {
  window.scroll(0, scrollPosition += velocity);
  
  if (document.querySelector(element).offsetTop <= scrollPosition) {
    return;
  }
  
  animation = requestAnimationFrame(() => {
    rolarPagina(element);
  })
}
#pause, #play {
  position:fixed;
  right: 0;
  width: 50px;
}

#play {
  right: 55px;
}
<button type="button" id="pause">&#9612; &#9612;</button>
<button type="button" id="play">►</button>

<div id="cifra">
<h3>Epica - Cry For The Moon</h3>
<pre><b>Dm</b>
Follow your common sense
<b>Am</b>
You cannot hide yourself
<b>Gm</b>       <b>F</b>         <b>Gm</b>      <b>A7</b>
Behind a fairytale  forever and ever
<b>Dm</b>
Only by revealing the
<b>Am</b>
Whole truth can we disclose
<b>Gm</b>           <b>F</b>                <b>Gm</b>
The soul of this sick bulwark  forever and ever
<b>A7</b>
Forever and ever!

<b>Dm/A</b>                    <b>Bb/F</b>
Indoctrinated minds so very often
<b>Dm/A</b>
Contain sick thoughts
    <b>Bb/F</b>               <b>C/G</b>               <b>Dm/A</b>
And commit most of the evil they preach against

Instrumental: <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>F5</b>  <b>E5</b> (2x)
              <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>D#5</b>  <b>C5</b>
              <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>F5</b>  <b>E5</b>
              <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>F5</b>  <b>E5</b>
              <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>F5</b>  <b>G5</b>  <b>A7</b>

<b>D5</b>                       <b>D5</b> <b>D#5</b> <b>D5</b>
Don't try to convince me
                    <b>D5</b>
With messages from God
<b>D#5</b>   <b>D5</b>             <b>D5</b> <b>D#5</b>
You accuse us of sins
<b>C/G</b>
Committed by yourselves
<b>D5</b>                  <b>D5</b> <b>D#5</b> <b>D5</b>
It's easy to condemn
                            <b>D5</b> <b>D#5</b> <b>D5</b>
Without looking in the mirror
                <b>D5</b> <b>D#5</b> <b>C/G</b>                      <b>Bb/F</b>       <b>A7</b>
Behind the scenes       (Behind the scenes opens... reality)

<b>Dm/A</b>            <b>Bb/F</b>  <b>A7</b>  <b>Bb/F</b>   <b>A7</b>
Eternal silence cries out for justice
<b>Dm/A</b>           <b>Bb/F</b>  <b>A7</b>     <b>Bb/F</b>        <b>A7</b>        <b>Dm</b>
Forgiveness is not for sale Nor is the will to forget

<b>Dm</b>
Follow your common sense
<b>Am</b>
You cannot hide yourself
<b>Gm</b>       <b>F</b>         <b>Gm</b>      <b>A7</b>
Behind a fairytale  forever and ever
<b>Dm</b>
Only by revealing the
<b>Am</b>
Whole truth can we disclose
<b>Gm</b>           <b>F</b>                <b>Gm</b>
The soul of this sick bulwark  forever and ever

<b>D5</b>                       <b>D5</b> <b>D#5</b> <b>D5</b>
Virginity has been stolen
                 <b>D5</b> <b>D#5</b>
At very young ages
<b>D5</b>                 <b>D5</b> <b>D#5</b>
And the extinguisher
<b>C/G</b>
Loses it's immunity
<b>D5</b>            <b>D5</b> <b>D#5</b> <b>D5</b>
Morbid abuse of
                         <b>D5</b> <b>D#5</b> <b>D5</b>
Power in the Garden of Eden
               <b>D5</b> <b>D#5</b> <b>C/G</b>                                   <b>Bb/F</b>          <b>A7</b>
Where the apple        (Where the apple gets a youthful face, a youthful face!)

<b>Dm/A</b>            <b>Bb/F</b>  <b>A7</b>  <b>Bb/F</b>   <b>A7</b>
Eternal silence cries out for justice
<b>Dm/A</b>           <b>Bb/F</b>  <b>A7</b>     <b>Bb/F</b>        <b>A7</b>        <b>Dm</b>
Forgiveness is not for sale Nor is the will to forget

<b>Dm</b>
Follow your common sense
<b>Am</b>
You cannot hide yourself
<b>Gm</b>       <b>F</b>         <b>Gm</b>      <b>A7</b>
Behind a fairytale  forever and ever
<b>Dm</b>
Only by revealing the
<b>Am</b>
Whole truth can we disclose
<b>Gm</b>           <b>F</b>                <b>Gm</b>
The soul of this sick bulwark  forever and ever
<b>A7</b>
Forever and ever!

(Instrumental)

<b>Dm/A</b>            <b>Bb/F</b>  <b>A7</b>  <b>Bb/F</b>   <b>A7</b>
Eternal silence cries out for justice
<b>Dm/A</b>           <b>Bb/F</b>  <b>A7</b>     <b>Bb/F</b>        <b>A7</b>        <b>Em</b>
Forgiveness is not for sale Nor is the will to forget
<b>Em</b>             <b>C</b>      <b>B7</b>       <b>C</b>   <b>B7</b>
You can't go on hiding yourself Behind
<b>Em</b>                  <b>C</b>
Old fashioned fairytales
<b>B7</b>       <b>C</b>             <b>B7</b>          <b>Em</b>
And keep washing your hands in innocence</pre>
</div>

<div id="cifra2">
<h3>Epica - Storm The Sorrow</h3>
<pre>Intro 2x: <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>

<b>Bm</b>        <b>G</b>             <b>Bm</b>
Along the way I find myself
         <b>D</b>        <b>D/C#</b>
To be confined within me
<b>Bm</b>           <b>G</b>           <b>D</b>              <b>Em</b>  <b>C</b>
No place for any other's mind to interfere,

<b>Bm</b>
To grasp the meaning of it all
        <b>D</b>       <b>D/C#</b>
To overcome my limits
<b>Bm</b>          <b>D</b>            <b>Em</b>            <b>F#</b>
And dance away from any void and empty tones,

(riff intro)    <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Just tell me why
                <b>C#5</b> <b>E5</b>     <b>F#5</b>      <b>D5</b>
Just tell me how I can survive this time

<b>Bm</b>                    <b>G</b>     <b>Bm</b>
Believe yourself and look away
                <b>D</b>        <b>D/C#</b>
From all that's right within you
<b>Bm</b>              <b>G</b>              <b>D</b>              <b>Em</b>   <b>C</b>
Leave all your worries at the door and drift away,
<b>Bm</b>             <b>G</b>             <b>Bm</b>
I've tried to peer into the core
               <b>D</b>        <b>D/C#</b>
But could not storm the sorrow
<b>Bm</b>         <b>D</b>                 <b>Em</b>              <b>F#</b>
My hollow heart has bled me dry, left me to stray


(riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Another time without a trace,
            <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Condemn me now
            <b>C#5</b>     <b>E5</b>     <b>F#5</b>  <b>D5</b>
Send me to hell For I'm already failing

(refrão I)
<b>Em</b>
Intertwine the lines
      <b>Bm</b>
That swim beneath the dark
            <b>D</b>
Realize the pain we live in
              <b>A</b>
Demonize the need we reel in, no
<b>Em</b>                       <b>Bm</b>
In my memories I'll dig deep enough to know
             <b>D</b>
Centuries of dreams unending
                 <b>A</b>                                <b>Bm</b>
Another me that yielded tears when someone had betrayed

<b>Bm</b>             (<b>G</b>)        <b>Bm</b>
No time should ever go to waste
               <b>D</b>    <b>D/C#</b>
It's not that complicated
<b>Bm</b>             <b>G</b>                 <b>D</b>
You're free to live your life at ease
            <b>Em</b>     <b>C</b>
No more restraints
<b>Bm</b>           (<b>G</b>)            <b>Bm</b>
No heed for shadows on your way
             <b>D</b>          <b>D/C#</b>
That try to steal your laughter
<b>Bm</b>              <b>D</b>               <b>Em</b>
Your light will drive them all away
         <b>F#</b>
Be confident

(riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Will I refrain?
         <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Can I repent?
            <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Will you be there?
           <b>C#5</b>     <b>E5</b>   <b>F#5</b>      <b>D5</b>
Erase the page For I'm alone and ailing

(volta para refrão I)

<b>C</b>

<b>Bm</b>   <b>C</b>
So, this is my life and it can't break me down
<b>Bm</b>                <b>C</b>
Go, I will decide who can come in and heal my disease
<b>Bm</b>
Burn it in flames
<b>Bm</b>
Kill it and maim
<b>C</b>
Why can't you see that you need to be freed?

(refrão II - piano)
<b>Em</b>                   <b>Bm</b>
Intertwine the lines beneath the dark
             <b>D</b>
Every bit of pain we're feeling
             <b>A</b>
Every other solemn life, no
<b>Em</b>                       <b>Bm</b>
In the memories you will find somehow
                    <b>D</b>
There used to be a dream unending
                <b>A</b>
No more need to be alone

(refrão III - sobe 1 tom)
<b>F#m</b>
Intertwine the lines
      <b>C#m</b>
That swim beneath the dark
             <b>E</b>
Realize the pain we live in
              <b>B</b>
Demonize the need we reel in, no
<b>F#m</b>                      <b>C#m</b>
In my memories I'll dig deep enough to know
              <b>E</b>
Centuries of dreams unending
                 <b>B</b>                              <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
Another me that yielded tears when someone had betrayed
               <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
Someone had betrayed

(riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b></pre>
</div>

Os botões Play e Pause também servirá para aumentar e diminuir a velocidade.

Utilizando jQuery

Com jQuery também é bem fácil. Basta utilizar o método animate

Para pausar basta utilizar:

$('html, body').stop();

Exemplo:

$("#play").click(function() {

  /* Captura o elemento que desejamos ir */
  var target = $( $("#cifra2") );

  $('html, body').animate({
      scrollTop: target.offset().top //Captura a posição do elemento
  }, 1000); //Tempo de animação em milissegundos
});

$("#pause").click(function() {
  $('html, body').stop();
});
#pause, #play {
  position:fixed;
  right: 0;
  width: 50px;
}

#play {
  right: 55px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="pause">&#9612; &#9612;</button>
<button type="button" id="play">►</button>

    <div id="cifra">
    <h3>Epica - Cry For The Moon</h3>
    <pre><b>Dm</b>
    Follow your common sense
    <b>Am</b>
    You cannot hide yourself
    <b>Gm</b>       <b>F</b>         <b>Gm</b>      <b>A7</b>
    Behind a fairytale  forever and ever
    <b>Dm</b>
    Only by revealing the
    <b>Am</b>
    Whole truth can we disclose
    <b>Gm</b>           <b>F</b>                <b>Gm</b>
    The soul of this sick bulwark  forever and ever
    <b>A7</b>
    Forever and ever!

    <b>Dm/A</b>                    <b>Bb/F</b>
    Indoctrinated minds so very often
    <b>Dm/A</b>
    Contain sick thoughts
        <b>Bb/F</b>               <b>C/G</b>               <b>Dm/A</b>
    And commit most of the evil they preach against

    Instrumental: <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>F5</b>  <b>E5</b> (2x)
                  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>D#5</b>  <b>C5</b>
                  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>B5</b>  <b>F5</b>  <b>E5</b>
                  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>F5</b>  <b>E5</b>
                  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>D5</b>  <b>F5</b>  <b>G5</b>  <b>A7</b>

    <b>D5</b>                       <b>D5</b> <b>D#5</b> <b>D5</b>
    Don't try to convince me
                        <b>D5</b>
    With messages from God
    <b>D#5</b>   <b>D5</b>             <b>D5</b> <b>D#5</b>
    You accuse us of sins
    <b>C/G</b>
    Committed by yourselves
    <b>D5</b>                  <b>D5</b> <b>D#5</b> <b>D5</b>
    It's easy to condemn
                                <b>D5</b> <b>D#5</b> <b>D5</b>
    Without looking in the mirror
                    <b>D5</b> <b>D#5</b> <b>C/G</b>                      <b>Bb/F</b>       <b>A7</b>
    Behind the scenes       (Behind the scenes opens... reality)

    <b>Dm/A</b>            <b>Bb/F</b>  <b>A7</b>  <b>Bb/F</b>   <b>A7</b>
    Eternal silence cries out for justice
    <b>Dm/A</b>           <b>Bb/F</b>  <b>A7</b>     <b>Bb/F</b>        <b>A7</b>        <b>Dm</b>
    Forgiveness is not for sale Nor is the will to forget

    <b>Dm</b>
    Follow your common sense
    <b>Am</b>
    You cannot hide yourself
    <b>Gm</b>       <b>F</b>         <b>Gm</b>      <b>A7</b>
    Behind a fairytale  forever and ever
    <b>Dm</b>
    Only by revealing the
    <b>Am</b>
    Whole truth can we disclose
    <b>Gm</b>           <b>F</b>                <b>Gm</b>
    The soul of this sick bulwark  forever and ever

    <b>D5</b>                       <b>D5</b> <b>D#5</b> <b>D5</b>
    Virginity has been stolen
                     <b>D5</b> <b>D#5</b>
    At very young ages
    <b>D5</b>                 <b>D5</b> <b>D#5</b>
    And the extinguisher
    <b>C/G</b>
    Loses it's immunity
    <b>D5</b>            <b>D5</b> <b>D#5</b> <b>D5</b>
    Morbid abuse of
                             <b>D5</b> <b>D#5</b> <b>D5</b>
    Power in the Garden of Eden
                   <b>D5</b> <b>D#5</b> <b>C/G</b>                                   <b>Bb/F</b>          <b>A7</b>
    Where the apple        (Where the apple gets a youthful face, a youthful face!)

    <b>Dm/A</b>            <b>Bb/F</b>  <b>A7</b>  <b>Bb/F</b>   <b>A7</b>
    Eternal silence cries out for justice
    <b>Dm/A</b>           <b>Bb/F</b>  <b>A7</b>     <b>Bb/F</b>        <b>A7</b>        <b>Dm</b>
    Forgiveness is not for sale Nor is the will to forget

    <b>Dm</b>
    Follow your common sense
    <b>Am</b>
    You cannot hide yourself
    <b>Gm</b>       <b>F</b>         <b>Gm</b>      <b>A7</b>
    Behind a fairytale  forever and ever
    <b>Dm</b>
    Only by revealing the
    <b>Am</b>
    Whole truth can we disclose
    <b>Gm</b>           <b>F</b>                <b>Gm</b>
    The soul of this sick bulwark  forever and ever
    <b>A7</b>
    Forever and ever!

    (Instrumental)

    <b>Dm/A</b>            <b>Bb/F</b>  <b>A7</b>  <b>Bb/F</b>   <b>A7</b>
    Eternal silence cries out for justice
    <b>Dm/A</b>           <b>Bb/F</b>  <b>A7</b>     <b>Bb/F</b>        <b>A7</b>        <b>Em</b>
    Forgiveness is not for sale Nor is the will to forget
    <b>Em</b>             <b>C</b>      <b>B7</b>       <b>C</b>   <b>B7</b>
    You can't go on hiding yourself Behind
    <b>Em</b>                  <b>C</b>
    Old fashioned fairytales
    <b>B7</b>       <b>C</b>             <b>B7</b>          <b>Em</b>
    And keep washing your hands in innocence</pre>
    </div>

    <div id="cifra2">
    <h3>Epica - Storm The Sorrow</h3>
    <pre>Intro 2x: <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>

    <b>Bm</b>        <b>G</b>             <b>Bm</b>
    Along the way I find myself
             <b>D</b>        <b>D/C#</b>
    To be confined within me
    <b>Bm</b>           <b>G</b>           <b>D</b>              <b>Em</b>  <b>C</b>
    No place for any other's mind to interfere,

    <b>Bm</b>
    To grasp the meaning of it all
            <b>D</b>       <b>D/C#</b>
    To overcome my limits
    <b>Bm</b>          <b>D</b>            <b>Em</b>            <b>F#</b>
    And dance away from any void and empty tones,

    (riff intro)    <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
    Just tell me why
                    <b>C#5</b> <b>E5</b>     <b>F#5</b>      <b>D5</b>
    Just tell me how I can survive this time

    <b>Bm</b>                    <b>G</b>     <b>Bm</b>
    Believe yourself and look away
                    <b>D</b>        <b>D/C#</b>
    From all that's right within you
    <b>Bm</b>              <b>G</b>              <b>D</b>              <b>Em</b>   <b>C</b>
    Leave all your worries at the door and drift away,
    <b>Bm</b>             <b>G</b>             <b>Bm</b>
    I've tried to peer into the core
                   <b>D</b>        <b>D/C#</b>
    But could not storm the sorrow
    <b>Bm</b>         <b>D</b>                 <b>Em</b>              <b>F#</b>
    My hollow heart has bled me dry, left me to stray


    (riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
    Another time without a trace,
                <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
    Condemn me now
                <b>C#5</b>     <b>E5</b>     <b>F#5</b>  <b>D5</b>
    Send me to hell For I'm already failing

    (refrão I)
    <b>Em</b>
    Intertwine the lines
          <b>Bm</b>
    That swim beneath the dark
                <b>D</b>
    Realize the pain we live in
                  <b>A</b>
    Demonize the need we reel in, no
    <b>Em</b>                       <b>Bm</b>
    In my memories I'll dig deep enough to know
                 <b>D</b>
    Centuries of dreams unending
                     <b>A</b>                                <b>Bm</b>
    Another me that yielded tears when someone had betrayed

    <b>Bm</b>             (<b>G</b>)        <b>Bm</b>
    No time should ever go to waste
                   <b>D</b>    <b>D/C#</b>
    It's not that complicated
    <b>Bm</b>             <b>G</b>                 <b>D</b>
    You're free to live your life at ease
                <b>Em</b>     <b>C</b>
    No more restraints
    <b>Bm</b>           (<b>G</b>)            <b>Bm</b>
    No heed for shadows on your way
                 <b>D</b>          <b>D/C#</b>
    That try to steal your laughter
    <b>Bm</b>              <b>D</b>               <b>Em</b>
    Your light will drive them all away
             <b>F#</b>
    Be confident

    (riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
    Will I refrain?
             <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
    Can I repent?
                <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
    Will you be there?
               <b>C#5</b>     <b>E5</b>   <b>F#5</b>      <b>D5</b>
    Erase the page For I'm alone and ailing

    (volta para refrão I)

    <b>C</b>

    <b>Bm</b>   <b>C</b>
    So, this is my life and it can't break me down
    <b>Bm</b>                <b>C</b>
    Go, I will decide who can come in and heal my disease
    <b>Bm</b>
    Burn it in flames
    <b>Bm</b>
    Kill it and maim
    <b>C</b>
    Why can't you see that you need to be freed?

    (refrão II - piano)
    <b>Em</b>                   <b>Bm</b>
    Intertwine the lines beneath the dark
                 <b>D</b>
    Every bit of pain we're feeling
                 <b>A</b>
    Every other solemn life, no
    <b>Em</b>                       <b>Bm</b>
    In the memories you will find somehow
                        <b>D</b>
    There used to be a dream unending
                    <b>A</b>
    No more need to be alone

    (refrão III - sobe 1 tom)
    <b>F#m</b>
    Intertwine the lines
          <b>C#m</b>
    That swim beneath the dark
                 <b>E</b>
    Realize the pain we live in
                  <b>B</b>
    Demonize the need we reel in, no
    <b>F#m</b>                      <b>C#m</b>
    In my memories I'll dig deep enough to know
                  <b>E</b>
    Centuries of dreams unending
                     <b>B</b>                              <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b>
    Another me that yielded tears when someone had betrayed
                   <b>C#5</b> <b>E5</b> <b>F#5</b> <b>D5</b>
    Someone had betrayed

    (riff intro) <b>C#5</b> <b>E5</b> <b>D#5</b> <b>D5</b> <b>C#5</b></pre>
    </div>

Dica do Dia: Apesar de, às vezes, o jQuery parecer bem mais fácil e mais cômodo, utilize sempre o VanillaJS, ou o JavaScript Puro. Com isso você vai realmente aprender a programar na linguagem e não vai ficar "refém" de uma biblioteca.

3
  • Obrigado, Valdeir! Gostei de sua resposta utilizando VanillaJS. Seria possível adicionar um botão de pause? Commented 21/01/2018 às 12:28
  • @WígnyAlmeida Editei minha resposta. Adicionei o botão para pausar em ambos exemplos. Espero que tenha ajudado-o. Commented 21/01/2018 às 16:10
  • seria interessando ao invés de play/pause utilizar um mais/menos pois ele altera a velocidade Commented 22/01/2018 às 16:20
2

Você pode usar setInterval (temporizador contínuo) que vai incrementando a rolagem da página. Criar 2 botões (play/pause) que chamam a função que faz o movimento. No botão play eu envio um parâmetro para a função (disparando a rolagem) e no botão pause eu não envio nada (parando a rolagem).

O valor 50 no setInterval representa a velocidade -- valor mais alto, mais lento. Em doc_scrl+2 eu incremento 2px à rolagem, ou seja, a cada ciclo do temporizador, a página é rolada 2 pixels.

Veja como funciona:

var tempo;
function rolar(e){
   if(e){
      var el = document.querySelector("#conteudo");
      tempo = setInterval(function(){
         var doc_scrl = document.documentElement.scrollTop;
         
         if(el.offsetTop-doc_scrl <= window.innerHeight-el.offsetHeight){ // aqui é quando a janela chega ao fim
            clearInterval(tempo);
         }else{
            window.scroll(0,doc_scrl+2);
         }
      }, 50);

   }else{
      clearInterval(tempo);
   }
}
#controls{
   position: fixed;
   top: 10px;
   left: 10px;
}

#conteudo{
   display: block;
   width: 400px;
   left: 100px;
   position: relative;
}
<div id="controls">
   <button class="botao" onclick="rolar(1)">&#x25B6;</button>
   <button class="botao" onclick="rolar()">II</button>
</div>
<div id="conteudo">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit scelerisque iaculis. Pellentesque luctus nisl et justo aliquet tincidunt. Etiam pharetra tristique mauris non sodales. Quisque mollis vel mauris a imperdiet. Duis sagittis posuere fringilla. Fusce pharetra ipsum lectus, vel malesuada felis consectetur a. Cras id lectus eget turpis porttitor euismod nec quis justo.
   <p>Quisque a elit eget felis scelerisque vulputate. Morbi congue laoreet lorem, vitae aliquam tortor pretium eu. Integer vehicula tellus eget tellus tincidunt, ut scelerisque felis pellentesque. Aenean urna ligula, condimentum eu tortor ac, pharetra ullamcorper nibh. Pellentesque eget tristique velit. Proin purus enim, rhoncus nec justo eget, porttitor feugiat magna. Phasellus bibendum quam in leo viverra, eu mollis nisl feugiat. Duis porta sollicitudin accumsan. Phasellus quis nunc lacinia, rhoncus sem eu, placerat magna. Nulla et dignissim odio, et vestibulum enim. Morbi dapibus cursus efficitur. Quisque sagittis congue varius.</p>
   <p>Nulla venenatis nec felis eu auctor. Nunc elementum magna et ligula accumsan condimentum. Pellentesque mollis risus a erat pretium hendrerit. Vestibulum ipsum nulla, laoreet ac maximus eu, consequat et erat. Vivamus sagittis vel sem non tincidunt. Duis orci dui, faucibus nec dolor ut, efficitur scelerisque elit. Nulla in vulputate nunc, quis ullamcorper neque. Suspendisse iaculis justo eu ante volutpat, vitae pretium lectus lobortis. Cras vitae diam mollis, fermentum nulla non, ultricies arcu. Vivamus ornare felis scelerisque ex porta tempor. In suscipit urna sit amet mi fringilla, at efficitur mi vestibulum.</p>
   <p>Fusce eget odio lacinia, feugiat metus ut, imperdiet ligula. Duis sit amet elementum mauris. Nulla nibh quam, efficitur nec lorem ut, mattis finibus mauris. Donec vitae lectus neque. Fusce lacinia risus libero, sit amet faucibus orci ornare id. Donec vitae nisi ac odio hendrerit lobortis sed quis justo. Pellentesque laoreet turpis a nulla lobortis, id laoreet nisl consectetur. Cras eget fringilla libero, quis condimentum nisl. Donec suscipit metus ut nibh tristique vestibulum. Nulla id venenatis nunc. Praesent sodales quis velit vel aliquam. Morbi ut hendrerit magna, eu viverra lectus.</p>
   <p>Duis non justo eget erat egestas finibus. Duis magna diam, laoreet ac scelerisque sit amet, euismod eu neque. Mauris vitae lacus arcu. Donec et dolor nec ex imperdiet dapibus at in quam. Mauris ac ornare risus, non posuere est. Mauris lorem sem, gravida quis sapien eget, blandit sagittis velit. Donec et sollicitudin nibh, ut gravida felis. Morbi maximus metus tellus, nec consectetur ipsum tristique vel. Phasellus vehicula magna quis erat posuere interdum. Curabitur laoreet est at scelerisque malesuada. Mauris sodales tellus vel congue aliquam. Donec eu accumsan sem.</p>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .