Move up / down scroll bar slowly through [duplicate] link

Navigation
0

Two fixed links in the corner of the page, if you move the mouse in the link to upload the scroll bar goes up slowly and the scroll down link is going down slowly, I saw this in an old page but I did not save it. code ...

So using it for now: 

<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 when it clicks it goes up or down at once and I wanted it to be very slow and without having to click just by passing the mouse it goes up or down slowly and when you move the mouse from above to move the bar.

    
asked by anonymous 26.08.2018 / 01:17

1 answer

2

You can use Jquery's "ScrollTop" to perform the animation and end 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>
    
26.08.2018 / 02:32
How to improve performance on this code Angular: error in model with object listing