Si siempre deseaste tener en tus web botones deslizantes para ir hacia arriba, esta es tu oportunidad te dejo unos botones animados muy buenos y puedes editar los botones y cambiarlos por lo que tú quieras.

Lo único que debes hacer es copiar el código que te presentare a continuación, y espero que les sirva de mucho este articulo.


El HTML (lo puedes colocar un cualquier lugar donde quieres que aparezca el botón)

Código:

<a href="#" class="stopScroll">Ir hacia arriba</a>

El CSS (Esto para colocar una imagen o modificar el botón a tu estilo)

Código:

.stopScroll{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('top_image.gif') no-repeat;
}

El JQuery para que funcione la animación del deslizamiento.

Código:

<script type="text/javascript">
    $(document).ready(function(){

       $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('.scrollup').fadeIn();
            } else {
                $('.scrollup').fadeOut();
            }
        });

       $('.scrollup').click(function(){
            $("html, body").animate({ scrollTop: 0 }, 600);
            return false;
        });
 
   });
</script>

Otro método que puedes aplicar también es esta:

Código:

<script language="JavaScript" type="text/javascript">//<![CDATA[
function abajo() {
window.scrollBy(0,20); // velocidad abajo
scrolldelay = setTimeout('abajo()',100); // tiempo
}function subir() {
window.scrollBy(0,-20); // velocidad subir
scrolldelay = setTimeout('subir()',100); // tiempo
}function stopScroll() {
clearTimeout(scrolldelay);
}//]]></script>

Código:

<a href="#" title="Ir Abajo" style="display:scroll;position:fixed;bottom:20px;right:20px;" onmouseover="abajo()" onmouseout="stopScroll()"><img src="http://u.jimdo.com/www39/o/s8a1794e71fdea162/img/id6fcae176fcbf9c8/1342881895/std/image.gif" alt="" /></a>

<a href="#" title="Ir Arriba" style="display:scroll;position:fixed; bottom:90px;right:20px;" onmouseover="subir()" onmouseout="stopScroll()"><img src="http://u.jimdo.com/www39/o/s8a1794e71fdea162/img/ifd715c86f717c193/1342881882/std/image.gif" alt="" /></a>

thanks