Foros del Web » Programando para Internet » Javascript » Frameworks JS »

$.scrollTo dentro de un div.... como se hace?

Estas en el tema de $.scrollTo dentro de un div.... como se hace? en el foro de Frameworks JS en Foros del Web. Bunas a [email protected], stoy tratando de lograr el efecto del scroll dentro de un div... pero no lo he logrado.... alguien me puede ayudar con ...
  #1 (permalink)  
Antiguo 17/04/2012, 19:13
 
Fecha de Ingreso: junio-2004
Ubicación: Ciudad de Panama
Mensajes: 551
Antigüedad: 16 años, 4 meses
Puntos: 8
Pregunta $.scrollTo dentro de un div.... como se hace?

Bunas a [email protected],

stoy tratando de lograr el efecto del scroll dentro de un div... pero no lo he logrado.... alguien me puede ayudar con esto?.... ahi les dejo el codigo

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>HOJA DE VIDA</title>
		<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
		<script language="javascript" type="text/javascript" src="js/jquery.scrollTo.js"></script>

<script>
$(document).ready(function () {

	$("a").click( function() {
		cual = $(this).attr("id");
		switch (cual) {
			case "top":
				cual = "tblhv";
			break;
			case "empsol":
				cual = "empleo";
			break;
			case "inffam":
				cual = "infFamiliar";
			break;
			case "edufor":
				cual = "educacion";
			break;
			case "enofor":
				cual = "ednoformal";
			break;
			case "exp":
				cual = "experincia";
			break;
		}
		ir = "#"+cual;
		$(ir).animate({
   				scrollTop: $(ir).offset().top
   		},
   		1500);
		return false;
	});
})

</script>

<style>
#hojadevida {
	overflow: auto;
	border-radius: 10px;
	box-shadow: 0 0 3em #EEF5F7;
	-webkit-box-shadow: 2px 2px 5px #999;
	-moz-box-shadow: 2px 2px 5px #999;
	filter: shadow(color=#999999, direction=135, strength=9);
	margin: 8px 0;
	margin-left: 150px;
	width: 1100px;
	height: 440px;
}

#nav-dock {
	position: fixed;
	left: 10px;
	top: 10%;
}
#nav-dock a {
	width: 135px;
	display: block;
	padding: 3px 10px;
	margin: 3px 0;
	background: #666;
	color: #fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
</style>
</head>
	<body>
		<form id="formConsultaHv">
			<div id="hojadevida" align="center">
					<table id="tblhv" align="center" border="1" class="tabla">
						<tbody id="datoshv">
								<th colspan="6"><strong>DATOS PERSONALES</strong></th>
							<tr>
								<th><strong>Documento</th>
								<td id="doc"></td>
								<td align="center" rowspan="5" style="font-family: Verdana;">
									<table align="center">
									<div id="fotox" style="border-left-color: #85ae35; border-bottom-color: #85ae35; border-top-style: solid; border-top-color: #85ae35; border-right-style: solid; border-left-style: solid; background-color: #f4f9ec; border-right-color: #85ae35; border-bottom-style: solid; width: 86px; position: static; top: 205px; height: 114px; vertical-align: bottom;">
										<img id="image-list" width="86px" height="114px"/>

									</div>
									</table>
								</td>
							</tr>
							<tr>
								<th><strong>Nombres</th>
								<td id="nom"</td>
							</tr>
							<tr>
								<th><strong>Apellidos</th>
								<td id="ape"</td>
							</tr>
							<tr>
								<th><strong>Lugar De Nacimiento</th>
								<td id="lnace"></td>
							<tr>
								<th><strong>Fecha De Nacimiento</th>
								<td id="fnace"></td>
							</tr>
							<tr>
								<th><strong>Genero</th>
								<td id="genero"></td>
							</tr>
							<tr>
								<th><strong>Grupo Sanguineo</th>
								<td id="gruposan"></td>
							</tr>
							<tr>
								<th><strong>Estado Civil</th>
								<td id="ecivil"></td>
							</tr>
							<tr>
								<th><strong>Correo electronico</th>
								<td id="email"></td>
							</tr>
							<tr>
								<th><strong>Libreta Militar</th>
								<td id="libreta"></td>
							</tr>
							<tr>
								<th><strong>Certificado judicial</th>
								<td id="certifjudicial"></td>
							</tr>
							<tr>
								<th><strong>Pasaporte</th>
								<td id="pasaporte"></td>
							</tr>
							<tr>
								<th colspan="6"><strong>RESIDENCIA</strong></th>
							</tr>
							<tr>
								<th><strong>Lugar De Residencia</th>
								<td id="lugarresi"></td>
							</tr>
							<tr>
								<th><strong>Barrio</th>
								<td id="barrio"></td>
							</tr>
							<tr>
								<th><strong>Localidad/Comuna</th>
								<td id="localidad"></td>
							</tr>
							<tr>
								<th><strong>Direccion</th>
								<td id="direccion"></td>
							</tr>
							<tr>
								<th><strong>Telefono</th>
								<td id="telefono"></td>
							</tr>
							<tr>
								<th><strong>Movil</th>
								<td id="movil"></td>
							</tr>
							<tr>
								<th colspan="6"><strong>CONTACTO</strong></th>
							</tr>
							<tr>
								<th><strong>Nombre</th><td id="nomcontacto"></td>
							</tr>
							<tr>
								<th><strong>Telefono</th><td id="telcontacto"></td>
							</tr>
						</tbody>
					</table>
					<br></br>
					<table id="empleo" align="center" border="1" width="550px" class="tabla">
						<tbody>
							<tr>
								<th colspan="6"><strong>EMPLEO QUE SOLICITA</strong></th>
							</tr>
							<tr>
								<th><strong>Tipo De Empleo</th>
								<td id="tipoEmp"></td>
							</tr>
							<tr>
								<th rowspan="3"><strong>Cargos A Los Que Aspira</th>
								<td id="car1"></td>
							</tr>
							<tr>
								<td></td>
								<td id="car2"></td>
							</tr>
							<tr>
								<td></td>
								<td id="car3"></td>
							</tr>
							<tr>
								<th><strong>Aspiracion Salarial</th>
								<td id="asp"></td>
							</tr>
						</tbody>
					</table>
					<br></br>
					<table id="infFamiliar" align="center" width="550px" border="1" class="tabla">
						<tbody>
								<th colspan="6"><strong>INFORMACION FAMILIAR</strong></th>
							</tr>
							<tr>
								<th rowspan="8"><strong>Conyuge</th>
							</tr>
							<tr>
								<th><strong>Nombre</th><td id="nomconyuge"></td>
							</tr>
							<tr>
								<th><strong>Documento</th>
								<td id="docconyuge"></td>
							</tr>
							<tr>
								<th><strong>Fecha Nacimiento</th>
								<td id="fnaceconyuge"></td>
							</tr>
							<tr>
								<th><strong>Profesion</th>
								<td id="profesionconyuge"></td>
							</tr>
							<tr>
								<th><strong>Empresa</th>
								<td id="empreconyuge"></td>
							</tr>
							<tr>
							<th><strong>Direccion</th>
								<td id="diremp"></td>
							</tr>
							<tr>
								<th><strong>Telefono</th>
								<td id="telemp"></td>
							</tr>
							<tr>
								<th rowspan="4"><strong>Padre</th>
							</tr>
							<tr>
								<th><strong>Nombre:</th><td id="nompadre"></td>
							</tr>
							<tr>
								<th><strong>Profesion:</th><td id="profpadre"></td>
							</tr>
							<tr>
								<th><strong>Fecha Nacimiento:</th><td id="fnace_padre"></td>
							</tr>
							<tr>
								<th rowspan="4"><strong>Madre</th>
							</tr>
							<tr>
								<th><strong>Nombre:</th><td id="nommadre"></td>
							</tr>
							<tr>
								<th><strong>Profesion:</th><td id="profmadre"></td>
							</tr>
							<tr>
								<th><strong>Fecha Nacimiento:</th><td id="fnace_madre"></th>
							</tr>
							<tr></tr>
							<tr></tr>
							<tr></tr>
							<tr></tr>
							<tr>
								<th colspan="6"><strong>PERSONAS A CARGO ECONOMICAMENTE</strong></th>
							</tr>
							<tr>
								<td colspan="3">
									<table id="tbldatosacargo" align="center" border="1" class="basica">
										<tbody id="datosacargo">
											<th align="center"><strong>Parentesco</strong></th><th align="center"><strong>Nombres</strong></th><th align="center"><strong>Fecha Nacimiento</strong></th>
<tr id='lcar_0'><td id='par_0'></td><td id='nom_0'></td><td id='fec_0'></td></tr><tr id='lcar_1'><td id='par_1'></td><td id='nom_1'></td><td id='fec_1'></td></tr><tr id='lcar_2'><td id='par_2'></td><td id='nom_2'></td><td id='fec_2'></td></tr><tr id='lcar_3'><td id='par_3'></td><td id='nom_3'></td><td id='fec_3'></td></tr><tr id='lcar_4'><td id='par_4'></td><td id='nom_4'></td><td id='fec_4'></td></tr><tr id='lcar_5'><td id='par_5'></td><td id='nom_5'></td><td id='fec_5'></td></tr> </tbody>
									</table>
								</td>
							</tr>
						</tbody>
					</table>
					<br></br>
					<div id="nav-dock">
						<a href="#" id="top">DatosPersonales</a>
						<a href="#" id="empsol">EmpleoSolicitado</a>
						<a href="#" id="inffam">InformacionFamiliar</a>
					</div>
			</div>
		<form>
	</body>
</html> 
En la parte derecha aparecen los botones en los que al hacer click debería realizar el scroll

Gracias de antemano por su ayuda

Un Cordial Saludo
  #2 (permalink)  
Antiguo 18/04/2012, 10:29
 
Fecha de Ingreso: junio-2004
Ubicación: Ciudad de Panama
Mensajes: 551
Antigüedad: 16 años, 4 meses
Puntos: 8
Respuesta: $.scrollTo dentro de un div.... como se hace?

Listo, solucionado.....

La solución consiste en colocar un <a name="xxx"></a> antes de cada <table .....> donde se quiere que vaya la pagina y en los links colocar <a href="#xxx">Ir A xxx</a> (en el <div id="nav-dock">)

Lo que no he logrado es darle el efecto animate.... pero bueno

Son bienvenidos sus aportes

Un Cordial Saludo

Etiquetas: jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:52.