Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* TUTORIAL: Poner flecha ir arriba estilo taringa
  Leído 5287 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: Jack
Abr 25 2012
Hola a todos, aca comparto un tutorial de como poner una flecha para ir arriba de todo estilo taringa, estos son los pasos a seguir.

1) Primero antes que nada asegurarse que se tiene el jquery cargado en los scripts de nuestro foro.

2) En nuestro index template, del tema que estamos usando agregar:

Despues de esto:

Código: [Seleccionar]
function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

agregar esto:

Código: [Seleccionar]
include("boton.html");
Entonces quedaria asi:

Código: [Seleccionar]
function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
        include("boton.html");
echo '
</div></div></div></div></body></html>';
}

* Esto se encuentra antes de terminar los div, y el body.

3) Ahora vamos al index.css de nuestro theme y agregamos al final de todo esto:

Código: [Seleccionar]
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 5px; /* Distancia desde la derecha */
}

#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(../images/arrowtop.png) no-repeat center center;
}

4) Ahora descargamos la flecha de este link:

http://www.chatz.com.ar/Themes/DSv4/images/arrowtop.png

Y la ponemos en la carpeta "images" del theme que estamos usando.

5) Ultimo paso, creamos un archivo html con este nombre: "boton.html" y ponemos dentro, este codigo:

Código: [Seleccionar]
<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba

jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
</script>

Una vez hecho todo esto, subimos el archivo html a la raiz de nuestro foro ( normalmente a la carpeta "htdocs")

Buenos eso es todo, saludos y espero que les sirva, pueden ver la flecha funciona en mi foro: chatz.com.ar.


« Última Modificación: Abril 25, 2012, 07:55:48 pm por jackflash »



Gracias por el aporte.  +10

Te movi el tema a la seccion de tutoriales.

Saludos ;)




Gracias por el aporte.  +10

Te movi el tema a la seccion de tutoriales.

Saludos ;)

Me ganaste de mano jajaja  :P :P.

Buen aporte saludos y gracias por compartir con la comunidad.




una demo para ver?




en chatz.com.ar y lo he visto en varios foros smf, y tambien en ***simple.com...  :-X




Lucas seria un tutorial de como hacer mas o menos la funcion de nuestro mod "adk back to top".
Osea no el mismo codigo, pero si la misma funcion y finalidad. ;)




Exacto es la misma funcion, buen tuto  (y)

Saludos enik...




y donde esta el scritp para subir :(




Como donde esta el script para subir?




Hola. Alguien sabe porque solo funciona en el index y no funciona en el resto del sitio?

Me explico, al entrar al index de mi sitio, bajo la página y funciona perfectamente, al ir al foro, sale el botón directamente y no funciona, sale siempre visible y sin funcionar-

Gracias de antemano.


« Última Modificación: Marzo 12, 2013, 06:13:05 pm por DaRKeN »




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,