Código de JQuery - Ir a una posición de la pantalla por su id

Imágen de perfil

Ir a una posición de la pantalla por su idgráfica de visualizaciones


JQuery

Publicado el 15 de Septiembre del 2015 por xve
1.438 visualizaciones desde el 15 de Septiembre del 2015. Una media de 28 por semana
Este código muestra como ir a cualquier punto de la pantalla que disponga de un id haciendo la animación del movimiento.

Versión 1.0

Actualizado el 16 de Septiembre del 2015 (Creado el 15 de Septiembre del 2015)gráfica de visualizaciones de la versión: Versión 1.0
1.439 visualizaciones desde el 15 de Septiembre del 2015. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puede ver el ejemplo de dicho código en: jquery_animacion-movimiento.php
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
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
 
	<script>
	// Esta función te mueve el scroll hasta llegar la id indicado
	// Tiene que recibir el id
	function goToId(idName)
	{
		if($("#"+idName).length)
		{
			var target_offset = $("#"+idName).offset();
			var target_top = target_offset.top;
			$('html,body').animate({scrollTop:target_top},{duration:"slow"});
		}
	}
 
	$(document).ready(function(){
		// Este evento se ejecuta cada vez que se pulsa una oción del menu
		$("#menu li").click(function(){
			// En el class del menu, se encuentra el nombre del id a donde
			// desplazarnos
			goToId($(this).attr('class'));
		});
	});
	</script>
 
	<style>
	#menu {
		list-style:none;
		overflow:hidden;
		padding:0px;
	}
	#menu li {
		float:left;
		position:relative;
		width: 10em;
		cursor:pointer;
		background-color: #E0F574;
		text-align:center;
		border-right:1px solid #fff;
		padding:10px 0;
	}
	div {
		clear:both;
		margin:20px 0px 500px 0px;
	}
	.right {float:right;cursor:pointer;}
	</style>
</head>
 
<body>
 
<ul id="menu">
	<li class="id1">opcion1</li>
	<li class="id2">opcion2</li>
	<li class="id3">opcion3</li>
	<li class="id4">opcion4</li>
	<li class="id5">opcion5</li>
</ul>
 
<div id="id1">
	<div class="right" onclick="goToId('menu')">Subir</a></div>
	contenido opcion 1
</div>
<div id="id2">
	<div class="right" onclick="goToId('menu')">Subir</a></div>
	contenido opcion 2
</div>
<div id="id3">
	<div class="right" onclick="goToId('menu')">Subir</a></div>
	contenido opcion 3
</div>
<div id="id4">
	<div class="right" onclick="goToId('menu')">Subir</a></div>
	contenido opcion 4
</div>
<div id="id5">
	<div class="right" onclick="goToId('menu')">Subir</a></div>
	contenido opcion 5
</div>
</body>
</html>



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


No hay comentarios
 

Comentar la versión: Versión 1.0

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

http://lwp-l.com/s3275