Hacer bóton de ir arriba deslizante usando Jquery Backtotop .- Recursos y trucos para programación Web .- Blog .- Registro y alojamiento de dominios. Controldedominios

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/

Recursos y trucos para programación Web

Hacer bóton de ir arriba deslizante usando Jquery Backtotop

Enlaces recomendados