Scroll up/down bar slowly via link

Question

Two fixed links in the corner of the page ai if you hover the mouse in the link of the scroll up the scroll bar goes up slowly and in the link of the scroll down the scroll bar goes down slowly, I saw this in an old page but I did not save the code...

I’m wearing it so far:

<style>
#heightexemplo {
height:1500px;
}
#lary{
position:fixed;
_position:absolute;
bottom:100px;
_bottom:expression(eval(document.body.scrollBottom));
right:50px;
width:200px;
font-size:20px;
background:transparent;
z-index:9;
border:1px solid #000;
border-radius: 12px;
    outline: 0;
    transition: all .5s linear;
    box-shadow: inset 0px 0px 10px #777;
    color:#ddd;
}
#lary li{
list-style:none; 
margin:0px;
}
#lary li a{
background:#2788CC;
float:right;
line-height:30px;
width:180px;
height:30px;
text-align:left;
display:block;
text-decoration:none;
font-weight:bold;
color:#000000;
padding: 5px 0px 5px 20px;
margin-left:0px;
border-top:2px solid #000000;
border-bottom:2px solid #000000;
cursor:pointer;
transition:all 0.1s linear;
-moz-transition:all 0.1s linear;
-webkit-transition:all 0.1s linear;
-o-transition:all 0.1s linear;
border-radius: 12px;
    outline: 0;
    transition: all .5s linear;
    box-shadow: inset 0px 0px 10px #777;
}
#lary li a:hover{
background:#fff;

}
</style>
<div id='heightexemplo'>
<div id='lary'>
  <a href='javascript:/*lary*/;document.getElementById(&apos;lary&apos;).style.display=&apos;none&apos;;void(0);'><img onmouseout='this.src=&apos;https://3.bp.blogspot.com/-clVZEQaHTS8/W3zitXqroPI/AAAAAAAAAbQ/6CIUqaJzTo0CMj5pObHeRfk7JKk_ujuvwCK4BGAYYCw/s1600/x.png&apos;' onmouseover='this.src=&apos;https://1.bp.blogspot.com/-nW3hSNKWlzM/W3znmduxjBI/AAAAAAAAAbc/1LIethV9NSMAHFq4HMZkRr3fddNwIUWigCK4BGAYYCw/s1600/Sem%2Bt%25C3%25ADtulo%2B1.png&apos;' src='https://3.bp.blogspot.com/-clVZEQaHTS8/W3zitXqroPI/AAAAAAAAAbQ/6CIUqaJzTo0CMj5pObHeRfk7JKk_ujuvwCK4BGAYYCw/s1600/x.png' style='float:right;'/></a>
<ul>
  <li><a href='/'>Inicio</a></li>
  <li><a href="javascript:/*lary*/;scroll(0,0)" title="Subir para o topo!">SUBIR</a></li>
  <li><a href="javascript:/*lary*/;scroll(99999,99999)" title="descer para o fim!">DESCER</a></li>
</ul>
</div>
</div>

Only the moment you click it goes up or down at once and I wanted it to be very slow and without having to click just past the mouse it goes up or down slowly and when you take the mouse away to move the bar.

Answer 1

You can use Jquery’s "Scrolltop" to perform the animation and finish it at any time with "stop()":

    <div>
        <a id="subir" style="position: fixed;">subir</a>
        <a id="descer" style="position: fixed; right: 0px;">descer</a>
    </div>
    <script>
    $("#subir").mouseenter(function(){
        $("html body").animate({scrollTop: 0},2000);
    }).mouseleave(function(){
        $("html body").stop();
    });
    $("#descer").mouseenter(function(){
        $("html body").animate({scrollTop : $(window).height()}, 2000);    
    }).mouseleave(function(){
        $("html body").stop();
    });  
    </script>