1
I would like to add a kind of automatic scrolling in my html, with start and stop buttons, and do not know how to do.
I would like when clicking start, the attribute to scroll down slowly, and when clicking stop, to stop where it was.
A good example of this service is in the "auto scrolling" of ciphers, the Cifra Club.
Excuse me, I’m a beginner. I thank you.
4
To make this effect is quite simple, just use the method scroll window..
With this method you can change the coordinates X and Y. Ex:
window.scroll(x-coord, y-coord);
All right! No secrets.
If you want something less "locked", you can use the method window.requestAnimationFrame
To pause simply store the ID returned by the function requestAnimationFrame and use it in function cancelAnimationFrame.
Following example:
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">▌ ▌</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>Play and Pause buttons will also serve to increase and decrease speed.
With jQuery is also very easy. Just use the method Animate
To pause just use:
$('html, body').stop();
Example:
$("#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">▌ ▌</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>Tip of the Day: Although sometimes jQuery seems much easier and more comfortable, always use Vanillajs, or Pure Javascript. With this you will really learn to program in the language and will not be "hostage" to a library.
Thank you, Valdeir! I liked your reply using Vanillajs. It would be possible to add a pause button?
@Wígnyalmeida I edited my reply. I added the pause button on both examples. I hope I helped you.
it would be interesting instead of play/pause to use a more/less because it changes the speed
2
You can use setInterval (Continuous timer) that increases the scrolling of the page. Create 2 buttons (play/pause) that call the function that makes the movement. On the button play I send a parameter to the function (triggering the scrolling) and button pause i do not send anything (stopping scrolling).
The value 50 in the setInterval represents the highest, slowest speed -- value. In doc_scrl+2 i increment 2px to scrolling, that is, each timer cycle, the page is scrolled 2 pixels.
See how it works:
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)">▶</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>Browser other questions tagged javascript html script
You are not signed in. Login or sign up in order to post.
Face you have to use id on the tags you want to be scrolling points and use jQuery(easier than pure Javascript) to make the scroll effect.
– LeAndrade
How could I arrive at this result? You can give an example?
– Wígny Almeida