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

Imágen de perfil
Val: 382
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

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 (534 códigos)
4.139 visualizaciones desde el 23 de Julio del 2014
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
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 23 de Julio del 2014gráfica de visualizaciones de la versión: Versión 1
4.140 visualizaciones desde el 23 de Julio del 2014
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 (1)

Arthur
19 de Julio del 2017
estrellaestrellaestrellaestrellaestrella
Muy buen aporte y sobre todo adaptable.
Responder

Comentar la versión: Versión 1

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2723