Cargando...
Notificaciones Password  Username

Regresar CPortada - Mas que un foro, tu Comunidad.  » Recursos para Forumotion - Foroactivo » PHPBB2
Actualizar esta página Botón "Ir arriba" con animación
Nombre de Usuario:
Contraseña:
   

Responder al tema
 
Herramientas Botón "Ir arriba" con animación 2x97uModos de visualización Botón "Ir arriba" con animación 2x97u

Botón "Ir arriba" con animación UFXmlYjBotón "Ir arriba" con animación ZcHKMjL
(#1)
Old  Supervisor
">
Miko
Supervisor
Miko
38711722805/02/2009PeruMy dream is you.https://i.imgur.com/Nh2lbrq.png
 
Botón "Ir arriba" con animación Empty Botón "Ir arriba" con animación - 19/6/2013, 11:46 am

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>

Botón "Ir arriba" con animación UFXmlYjBotón "Ir arriba" con animación ZcHKMjL
(#2)
Old  Principiante
">
Eslam Love
Principiante
Eslam Love
77027/02/2015Other
 
Botón "Ir arriba" con animación Empty thanks - 27/2/2015, 10:59 am

thanks

Comentar con facebook:
 
Permisos de este foro:
No puedes responder a temas en este foro.

 Los Códigos BB están Activado
 Los Emoticonos están Activado
 Código [IMG] está Activado
 Código HTML está Activado