Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Ir arriba y abajo con jQuery
#1
En esta ocasión les enseñaré una forma sencilla y sin complicaciones para ir arriba o abajo de nuestras webs con efecto deslizante y con jQuery.

Es muy sencillo y pues solamente usaremos dos scripts y unas cuantas clases en nuestro CSS.

Primer paso.- Añadimos lo siguiente antes de cerrar la etiqueta head de nuestra web:

Código:
<script type='text/javascript'>
//< ![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {

jQuery(function () {
jQuery(window).scroll(function () {
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

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

<script type='text/javascript'>
//< ![CDATA[
// Botón para Ir Abajo
var ancho= jQuery('#container');
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(function () {
jQuery(window).scroll(function () {
});
jQuery('#IrAbajo a').click(function () {
jQuery('body,html').animate({
scrollTop: jQuery('#container').height()
}, 800);
return false;
});
});
});
//]]>
</script>

Segundo paso.- Vamos a la hoja de estilos de nuestra web y agregamos lo siguiente:

Código PHP:
#IrArriba {
positionfixed;
top:25px;
right10px/* Distancia desde la derecha */
}
 
#IrArriba span {
width60px/* Ancho del botón */
height60px/* Alto del botón */
displayblock;
backgroundurl(https://i.imgur.com/OGGcw.png) no-repeat center center;
}
 
 
#IrAbajo {
positionfixed;
top:25px;
right70px/* Distancia desde la derecha */
}
 
#IrAbajo span {
width60px/* Ancho del botón */
height60px/* Alto del botón */
displayblock;
-
webkit-transformrotate(180deg);
    -
moz-transformrotate(180deg);
-
o-transformrotate(180deg);
-
ms-transformrotate(180deg);
    
rotation180deg;
    
filterprogid:DXImageTransform.Microsoft.BasicImage(rotation=1);
backgroundurl(https://i.imgur.com/OGGcw.png) no-repeat center center;


Las propiedades right la modifican según donde desean que se ubique el botón.

Tercer paso.- Agregan los siguiente en todas las páginas de su web. Es recomendable colocarlo en el footer o en header, de esa forma aparecerá en todos los lugares de la web.

Código PHP:
<div id='IrArriba'>
<
a href='#Arriba'><span /></a>
</
div>
<
div id='IrAbajo'>
<
a href='#Abajo'><span /></a>
</
div

Demo Online: Avatar, Reencarnación


[Imagen: 88x31.png]
Artículo publicado con Licencia Creative Commons. (Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0))

Si deseas publicarlo en otros sitios tendrás que publicar la licencia, la fuente, y la autoría.

Fuente: IR ARRIBA Y ABAJO CON JQUERY.
WWW
#2
Excelente tutorial, yo también tengo un tutorial así pero en mi foro.
#3
:O lo probare en un foro smf
#4
Moooola!! es funcional y queda bonito! buen tuto
#5
Gracias lo andaba buscando! saludos
#6
excelente tutoriar muy completo y facil de implementar gracias
WWW
#7
Está muy bien el tutorial, gracias Gran sonrisa
#8
No es por desmerecer a jquery pero ¿no sería mejor usar el anchor de html?
#9
orales que buen aporte aver si lo pruebo despues Gran sonrisa
WWW
#10
Gracias, muy sencillo de implementar Gran sonrisa


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  jQuery: ocultar imágenes rotas Jvh_22 10 849 03-01-2017, 09:26 PM
Último mensaje: gassip
Estrella [Aporte] La nueva generación de jQuery tendrá cambios en su nomenclatura carlsmartg 1 391 03-08-2016, 09:23 PM
Último mensaje: Boreas
  [Duda] Como implementar Jquery.cookie llProKsll 3 454 11-02-2016, 01:55 PM
Último mensaje: Vicen
Información [Tutorial] Detectar AdBlock y mostrar mensaje (jQuery) DarkMaster 7 828 28-01-2016, 03:32 PM
Último mensaje: TapaJerez
  Libro de jQuery en español CarlosAlberto 1 484 30-12-2015, 11:39 PM
Último mensaje: habacuc78
  [Tutorial] jQuery HTML5 Form Plugin - jQuery Form Plugin luis.ml 0 356 16-08-2015, 02:02 AM
Último mensaje: luis.ml
Ladrillo Como usar botones "disabled" y activarlos por JQuery Kevin9908 0 423 25-06-2015, 04:38 PM
Último mensaje: Kevin9908
  [Jquery] Contar carácteres de un input DipDip 0 1,716 04-02-2015, 09:28 PM
Último mensaje: DipDip
  [Ayuda]Como hacer Funcionar 2 Buscadores JQUERY AngelKrak 2 518 28-12-2014, 06:14 AM
Último mensaje: AngelKrak
  Snowfall: Efecto nieve con jquery warez 2 768 20-12-2014, 03:31 AM
Último mensaje: Lob3zNo



Usuarios navegando en este tema: 1 invitado(s)