19 August 2014, 14:26
2
Bueno, ésta es una variante del famoso Scroll to top o Ir hacia arriba o Ir al cielo, como deseen llamarlo.
Es un código muy simple, lo único molesto es estilizarlo, pero para eso les dejo un lindo código que ya he utilizado.
Bien, comencemos...
jQuery
En nuestra plantilla headerinclude, añadiremos el siguiente código (Recuerda que debes, anteriormente, hacer una llamada a la librería de jQuery)
Aquí hay 3 cosas por resaltar.
Primero la variable offset la cual mide el espacio recorrido por el navegador para mostrar el botón, más cantidad añadan, más demorará en aparecer dicho botón; menos cantidad, menos tiempo para que aparezca.
Luego tenemos la variable duration la cual mide el tiempo en aparecer y desaparecer del botón (el efecto), más tiempo, más demora, menos tiempo, menos demora.
Por último, en la siguiente línea:
El número 1200 representa la velocidad con la que el contenido (en nuestro caso, el body) se desplazará. 1200 es un buen número a mi gusto, pero ustedes pueden modificarlo para que sea más rápido o más leve según crean necesario.
HTML
Dentro de la misma plantilla headerinclude, antes de la variable {$newpmmsg} añadiremos el siguiente código:
Simplemente deben reemplazar la leyenda Su ícono o texto por lo que deseen, yo particularmente utilizo Font Awesome Icons ya que son muy livianos y al ser fuentes, brindan una cantidad de funciones increíbles, pero queda a su gusto utilizar imágenes o simplemente texto.
CSS
Lo "molesto" es acomodar dicho botoncito, pero ya lo he hecho, pueden revisar el código ustedes mismos:
Modificando los valores de bottom y right pueden desplazarlo hasta donde ustedes deseen, en mi caso lo coloque justo pegadito a la barra de desplazamiento, bastante por debajo de la vista del usuario para que no moleste, y además de ésto, tiene un fondo transparente (Por si utilizan imágenes y desean que resalte dicho fondo).
Recuerden que el botón aparecerá solo cuando cierto espacio es recorrido, dicho espacio se puede modificar (anteriormente ya explicado) en el código jQuery.
Es un código muy simple, lo único molesto es estilizarlo, pero para eso les dejo un lindo código que ya he utilizado.
Bien, comencemos...
jQuery
En nuestra plantilla headerinclude, añadiremos el siguiente código (Recuerda que debes, anteriormente, hacer una llamada a la librería de jQuery)
Código PHP: ( Seleccionar Todo )
<script type="text/javascript">
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.nicetop').fadeIn(duration);
} else {
jQuery('.nicetop').fadeOut(duration);
}
});
jQuery('.nicetop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, 1200);
return false;
})
});
</script>
Aquí hay 3 cosas por resaltar.
Primero la variable offset la cual mide el espacio recorrido por el navegador para mostrar el botón, más cantidad añadan, más demorará en aparecer dicho botón; menos cantidad, menos tiempo para que aparezca.
Luego tenemos la variable duration la cual mide el tiempo en aparecer y desaparecer del botón (el efecto), más tiempo, más demora, menos tiempo, menos demora.
Por último, en la siguiente línea:
Cita:jQuery('html, body').animate({scrollTop: 0}, 1200);
El número 1200 representa la velocidad con la que el contenido (en nuestro caso, el body) se desplazará. 1200 es un buen número a mi gusto, pero ustedes pueden modificarlo para que sea más rápido o más leve según crean necesario.
HTML
Dentro de la misma plantilla headerinclude, antes de la variable {$newpmmsg} añadiremos el siguiente código:
Código PHP: ( Seleccionar Todo )
<div class="nicetop" title="{$lang->bottomlinks_returntop}">Su ícono o texto</div>
Simplemente deben reemplazar la leyenda Su ícono o texto por lo que deseen, yo particularmente utilizo Font Awesome Icons ya que son muy livianos y al ser fuentes, brindan una cantidad de funciones increíbles, pero queda a su gusto utilizar imágenes o simplemente texto.
CSS
Lo "molesto" es acomodar dicho botoncito, pero ya lo he hecho, pueden revisar el código ustedes mismos:
Cita:.nicetop {
cursor: pointer;
background: rgba(48,48,48,0.5);
padding: 12px 15px;
border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #C9C9C9;
display: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.nicetop:hover {
cursor: pointer;
background: rgba(58,58,58,0.7);
color: #FFFFFF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Modificando los valores de bottom y right pueden desplazarlo hasta donde ustedes deseen, en mi caso lo coloque justo pegadito a la barra de desplazamiento, bastante por debajo de la vista del usuario para que no moleste, y además de ésto, tiene un fondo transparente (Por si utilizan imágenes y desean que resalte dicho fondo).
Recuerden que el botón aparecerá solo cuando cierto espacio es recorrido, dicho espacio se puede modificar (anteriormente ya explicado) en el código jQuery.
Última modificación: 19 August 2014, 14:28 por eNvy.
.
