0

Dois links fixos no canto da pagina ai se vc passar o mouse no link de subir a barra de rolagem vai subindo devagar e no link de descer a barra de rolagem vai descendo devagar, vi isso em uma pagina antiga mas nao salvei o codigo...

to usando assim por enquanto:

<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>

Só que na hora que clica ele sobe ou desce de uma vez e eu queria que fosse bem lento e sem precisar clicar só de passa o mouse ele sobe ou desce devagar e quando tira o mouse de cima para de mover a barra.

0

1 Resposta 1

2

Você pode usar o "ScrollTop" do Jquery para realizar a animação e finaliza-la a qualquer momento com o "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>
0

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