PDA

Ver la versión completa : $.scrollTo dentro de un div.... como se hace?


AJaramillo
18-04-2012, 16:06
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



<!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
AJaramillo
18-04-2012, 17:29
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
clarinetista
18-04-2012, 23:14
Gracias por postear la solución :)