Código de JQuery - Como poner un botón para subir al inicio de nuestra página

Imágen de perfil

Como poner un botón para subir al inicio de nuestra páginagráfica de visualizaciones


JQuery

Publicado el 23 de Julio del 2014 por Xavi
2.413 visualizaciones desde el 23 de Julio del 2014. Una media de 21 por semana
Este código añade un botón en la parte inferior de la página cuando se desplaza la barra vertical del navegador (scroll) hacia abajo. Ese botón, nos permite con un simple efecto animado, subir al inicio de la página cuando es pulsado.

Versión 1

Publicado el 23 de Julio del 2014gráfica de visualizaciones de la versión: Versión 1
2.414 visualizaciones desde el 23 de Julio del 2014. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
 
    <script>
    $(document).ready(function(){
		/**
		 * Esta función es llamada para crear el botón de subida
		 * Esta función es llamada desde los eventos scroll() y resize()
		 *
		 * Se ha puesto en una función aparte, ya que no todos los navegadores
		 * ejecutan el evento scroll() al cargar la pagina
		 */
		function crearBoton()
		{
			// Revisamos que el scroll este por encima de 250 píxeles para
			// mostrar el botón de subir
			if($(document).scrollTop()>250)
			{
				// Si no existe dicho div, lo añadiremos al final del body
				if($("#botonSubir").length==0)
				{
					// añadimos el div al final de la pagina
					$("body").append("<div id='botonSubir' title='Subir'>Subir</div>");
					// Creamos el evento click para subir al inicio de la
					// página cuando se pulse nuestro botón
					$("#botonSubir").click(function(){
						// Indicamos lo que tiene que hacer la animación y el
						// tiempo que tiene que durar
						$('html,body').animate({scrollTop:0},{duration:"slow"})
					});
				}
				// mostramos el boton
				$("#botonSubir").fadeIn();
			}else{
				// escondemos el boton
				$("#botonSubir").fadeOut();
			}
		}
		// Ejecutamos la función manualmente, ya que no todos los navegadores
		// ejecutan el evento scroll al cargar una página, aunque se posicione
		// en una posición inferior con algún "ancla"
		crearBoton();
 
		/**
		 * Si se ejecuta el evento scroll o el evento resize, se ejecuta la
		 * función crearBoton()
		 */
		$(document).scroll(function(){
			crearBoton();
		});
		$(window).resize(function(){
			crearBoton();
		});
    });
    </script>
	<style>
	/* definimos el formato del botón */
	#botonSubir {
		bottom:0px;
		background:#ccc;
		margin-right:20px;
		padding:10px;
		position:fixed;
		right:0px;
		-moz-border-top-left-radius:5px;
		moz-border-top-right-radius:5px;
		border-top-left-radius:5px;
		border-top-right-radius:5px;
		cursor:pointer;
	}
	</style>
</head>
 
<body>
<p>Parte superior de la pagina</p>
 
<p>En el momento que empecemos a bajar el scroll, nos aparecerá el botón para
subir</p>
 
<p style='margin-top:2000px;'>Parte inferior de la pagina</p>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2723