Resultados 1 al 3 de 3

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

  1. #1 $.scrollTo dentro de un div.... como se hace? 
    Iniciado
    Fecha de ingreso
    Feb 2012
    Mensajes
    15
    Descargas
    0
    Uploads
    0
    Bunas a tod@s,

    Estoy 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:
    <!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
    Citar  
     

  2. #2  
    Iniciado
    Fecha de ingreso
    Feb 2012
    Mensajes
    15
    Descargas
    0
    Uploads
    0
    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
    Citar  
     

  3. #3  
    Co-Admin HackHispano.com Avatar de clarinetista
    Fecha de ingreso
    Jan 2004
    Ubicación
    HackHispano/SM
    Mensajes
    7.733
    Descargas
    30
    Uploads
    8
    Gracias por postear la solución
    Citar  
     

Temas similares

  1. como se hace esto en excel
    Por tikoalfa en el foro APLICACIONES
    Respuestas: 1
    Último mensaje: 18-05-2010, 13:41
  2. como se hace .?
    Por saltamontes en el foro PROGRAMACION WEB
    Respuestas: 2
    Último mensaje: 05-07-2008, 14:30
  3. como se hace¿?
    Por kn0k en el foro INTRUSION
    Respuestas: 0
    Último mensaje: 06-12-2007, 17:47
  4. COMO se hace?
    Por badny99 en el foro HACK HiSPANO
    Respuestas: 1
    Último mensaje: 24-09-2002, 23:58
  5. como se si estan dentro?
    Por eusadi en el foro GENERAL
    Respuestas: 1
    Último mensaje: 23-05-2002, 05:56

Marcadores

Marcadores

Permisos de publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •