Que tal gente, como habrán podido darse cuenta hemos agregado en nuestro blog el efecto del botón "ir arriba", que ayuda a los lectores a regresar al top del blog cuando los post se hacen algo largos no es el caso de este post porque sera bien corto pero igual podemos observarlos.
Ayer estuve buscando algún plugin o tutorial que haga esto ya que no tenia el tiempo como para hacer uno de 0 y me encontré con esta entrada Boton "Ir arriba" con Jquery y css3 donde explican como implementarlo haciendo uso de un plugin jquery llamado "scrolltop.js" haber como usamos este plugin
primero nos descargamos Jquery y luego descargamos el plugin jquery.scrollTop.js que no pesa mas de 4kb para usarlo solo llamamos al plugin en el HEAD de tu sitio justo después de hacerlo con jquery
<!DOCTYPE html> <html lang="es-ES"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type='text/javascript' src='http://ruta/donde/esta/jquery.js'></script> <script type='text/javascript' src='http://ruta/donde/esta/plugin/jquery.scrolltop.js'></script> </head>para utilizar el plugin solo necesitamos setear las opciones 5 opciones que nos trae de la siguiente manera
<script type='text/javascript'>
$(function(){
scrollTop({
color:"#6E888E",
top:400,
time:500,
position:"bottom",
speed: 300
});
});
</script>
a partir de la linea 3 donde llamamos a la función "scrollTop" que puede recibir hasta 5 par metros de configuración, en la linea 4 tenemos el primer parámetro que es "color" que hace referencia al color de fondo de la superficie, en la linea 5 el parámetro "top" que indica el máximo de altura hasta que aparezca el botón en la linea 6 el parámetro "time" es el tiempo en mili-segundos que dura el efecto al momento que aparece el botón, en la linea 7 el parámetro "position" indica la posición en la que aparecerá el botón este parámetro puede recibir 3 valores "top" "middle" "bottom" que nos hace una total referencia a la posición por ejemplo al poner position:"bottom" indica que el botón aparecerá y se mantendrá en la parte inferior de la pantalla, en la linea 8 el parámetro "speed" hace referencia a la velocidad que tiene la animación al hacer clic en el boton es decir el tiempo de duración de la animación al regresar al top.
hasta aquí obtenemos buenos resultado por ejemplo este sin embargo a mi parecer hay algunas características que no me convencían por ejemplo que desde el mismo plugin se tenia la referencia de la imagen de la flechita , lo cual te limita a manipular o cambiar la ruta de la imagen por miedo a malograr el código del plugin otra característica que vi que le faltaba al plugin es que unicamente el boton aparecía en el lado derecho que pasaría si quisieran ponerlo en el lado izquierdo, así que me decidí a hacerle un Hack al plugin agregándole 2 parámetros mas de esta forma
<script type='text/javascript'>
$(function(){
scrollTop({
color:"#6E888E",
top:400,
time:500,
position:"bottom",
speed: 300,
imgpath:"http://teatro.es/contenidos/documentosParaLaHistoria/Docs1940/imagenes/flechaArriba.png",
flotar:"left"
});
});
</script>
Los dos parámetros que he añadido al plugin son "imgpath" donde podemos agregar la imagen que queramos que aparezca en lugar de la fechita, el otro parámetro que me costo incluirlos es "flotar" este parámetro nos permita hacer flotar el botón ya sea en la derecha como en la izquierda.
Si quieren utilizar alguna de estas dos opciones tendrían que utilizar mi versión modificada la cual pueden descargar desde este enlace
Espero que les sirva y si hay alguna cosa que deseen mejorar o quieran añadir me lo hacen llegar y podría modificar el plugin.
0 comentarios:
Publicar un comentario
Gracias por comentarnos