Utilizamos cookies y tecnologías similares propias y de terceros, de sesión o persistentes, para hacer funcionar de manera segura nuestra página web y personalizar su contenido. Igualmente, utilizamos cookies para medir y obtener datos de la navegación que realizas. Puedes configurar y aceptar el uso de cookies a continuación. Asimismo, puedes modificar tus opciones de consentimiento en cualquier momento visitando nuestra Política de cookies. y obtener más información haciendo clic aquí.
 
Recuperar contraseña    
Usuarios Online:  40
English French German Italian Portuguese Spanish
 
 
Inicio | Blogs | Recursos y trucos para programación Web

Recursos y trucos para programación Web

5
NOV.
2014
 
 
 

Hacer bóton de ir arriba deslizante usando Jquery Backtotop

Publicado por Desarrollo Multimedia Team | miércoles, 5 de noviembre de 2014 a las 18:13 h.
1811  
 

Forma rápida para poner un botón con efecto deslizante para ir a la parte de arriba de la web. Primero incluimos las librería jquery y el plugin en el header de la web. El código quedaría así:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/backtotop.js" ></script>

Importante poner la ruta correcta del plugin backtotop dentro de los archivos de nuestra web. Puedes descargarlo de aquí: backtotop.js 

Después simplemente nos creamos un input, lo formateamos a nuestro gusto y llamamos al plugin desde un evento onclick como muestro a continuación:

<input style="position:fixed;bottom:5px;right:5px;background:#222;font-family: Arial, Helvetica, sans-serif;padding:4px;font-size:14px;" type="submit" value="Arriba!" onclick="MGJS.goTop();" />

En este caso el input tiene una posición fija o fixed por lo que se podría situar en cualquier parte dentro de las etiquetas <body>, de no ser así tendríamos que situar la etiqueta en la parte del código que corresponda.

Artículo seleccionado del Blog de Agustin Baraza en www.nosolocss.com/
 
 
¿Te ha gustado el artículo? ¡Suscríbete YA!
Únicamente recibirás un breve resumen mensual de los últimos post