Tengo este codigo para mi web que permite crear anclas en el interior de una pagina y dirigirse a los mismos con efecto smooth (suave, deslizante, etc.).
Mi problema es que cuando se dirije a un ancla, no para donde yo lo coloco exactamente, sino mas arriba o mas abajo.
Y en diferentes navegadores como IE6, IE7, Firefox, Chrome, Opera tiene distintos comportamientos, o sea hay variaciones en la forma de pararse.
Aqui esta el codigo HTML:
Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="estilo.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="anchor.js"></script> <title></title> </head> <body onload="replaceAnchorLinks()"> <div id="top"><a name="top"></a></div> <div id="contenedor"> <!--Menú--> <div id="menu"> <div id="logo"><a href="#top" onclick="smoothScroll('top'); return false"><img src="imgs/logo-sp.gif" /></a></div> <ul> <li><a href="#trabajos" onclick="smoothScroll('trabajos'); return false">Trabajos</a></li> <li><a href="#servicios" onclick="smoothScroll('servicios'); return false">Servicios</a></li> <li><a href="#contacto" onclick="smoothScroll('contacto'); return false">Contacto</a></li> </ul> <div id="flecha"><a href="#top" onclick="smoothScroll('top'); return false"><img src="imgs/flecha.gif" alt="Subir"/></a></div> </div> <!--Ilustración--> <div id="ilustracion"></div> <!--Contenido--> <div id="cont1"> <!--Trabajos--> <div id="trabajos"><a name="trabajos"></a></div> <h1>Trabajos</h1> <!--Logotipos--> <div id="subtitulo1"> <h3>Logotipos</h3> </div> <div id="cuadro-cont"> <div id="cuadro1"> <img src="imgs/logo.gif" /> <h2><a href="#">Asd</a></h2> </div> <div id="cuadro1"> <img src="imgs/logo.gif" /> <h2><a href="#">Asd</a></h2> </div> <div id="cuadro1"> <img src="imgs/logo.gif" /> <h2><a href="#">Asd</a></h2> </div> </div> <!--Diseño Web--> <div id="subtitulo1"> <h3>Diseño Web</h3> </div> <div id="cuadro-cont"> <div id="cuadro1"> <img src="imgs/img.gif" /> <h2><a href="#">Asd</a></h2> </div> <div id="cuadro1"> <img src="imgs/img.gif" /> <h2><a href="#">Asd</a></h2> </div> </div> <!--Servicios--> <div id="servicios"><a name="servicios"></a></div> <h1>Servicios</h1> <div id="text-servicios1"> <h4>AsdAsdAsdAsdAsdAsdAsdAsdAsdAsdAsdAsdAsd: </h4> </div> <div id="text-servicios2"> <h5><img src="imgs/punto.gif"/>Diseño Web<p><img src="imgs/punto.gif"/>Diseño Gráfico<p><img src="imgs/punto.gif"/>Diseño Interactivo</h5> </div> <br clear="all" /> </div> <div id="cont2"> <!--Contacto--> <div id="contacto"><a name="contacto"></a></div> <h1>Contacto</h1> <form action="" method="post" name="form" cid="form"> <h6><p>Nombre</p> <p><label><input type="text" name="nombre" id="nombre" /></label></p> <p>E-mail</p> <p><label><input type="text" name="mail" id="mail" /></label></p> <p>Consulta</p> <p><label><textarea name="mensaje" cols="30" rows="5"></textarea></label></p> <p><label><input type="submit" name="ingresar" id="ingresar" class="submit" value="Enviar" /></label></p></h6> </form> <div id="contacto-2"> <h6><p>AsdAsdAsdAsdAsdAsd.</p> </h6> <img src="imgs/linea3.gif" /> </div> </div> <div id="contenedor-pie"> </div> </div> </body> </html>
Código:
Y el Javascript:@charset "utf-8";
/* CSS Document */
/* CSS Reset */
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
body{
font-family:"Times New Roman", Times, serif;
font-size:12px;
margin:0 auto;
padding:0;
}
*{
margin:0;
padding:0;
}
#contenedor{
background-image:url(imgs/fondo1.gif);
background-repeat:repeat-x;
background-color:#f5fbfc;
margin:0 auto;
padding:0;
}
/* Anchors */
#top{
margin:0;
padding:0;
}
#trabajos{
margin:0;
padding:0;
}
#servicios{
margin:0;
padding:0;
}
#contacto{
margin:0;
padding:0;
}
/* Menú */
#menu{
width:735px;
height:42px;
border:1px solid #FFF;
background-color:#0e283f;
padding:0;
margin-top:-1px;
position:fixed;
z-index:100;
left:50%;
margin-left:-370px;
}
* html #menu {
position:absolute;
}
#menu ul{
list-style:none;
margin:2px;
padding:10px;
}
#menu ul li {
float:left;
padding-left:15px;
padding-right:15px;
margin-left:11px;
}
#menu ul li a{
font-size:18px;
text-decoration:none;
color:#FFF;
font-weight:bold;
}
#menu ul li a:hover{
color:#C1EAFF;
}
#logo{
float:left;
margin-left:20px;
margin-right:140px;
height:32px;
width:188px;
padding:10px 0 0 0;
display:inline;
}
#flecha{
float:right;
height:42px;
width:53px;
margin:-24px 0 0 0;
padding:0;
display:inline;
}
/* Ilustracion */
#ilustracion{
background-image:url(imgs/ilustracion.gif);
background-repeat:no-repeat;
width:760px;
height:379px;
padding:0;
margin:0 auto;
}
/* Contenido */
h1{
font-family:"Times New Roman", Times, serif;
font-size:18px;
color:#FFF;
font-weight:bold;
border:1px solid #FFF;
background-color:#0e283f;
margin:0 0 0 -10px;
margin-right:550px;
padding:12px 37px;
float:left;
position:relative;
display:inline;
}
a{
font-family:"Times New Roman", Times, serif;
text-decoration:underline;
color:#0e283f;
}
#cont1{
width:718px;
background-color:#FFF;
padding:0;
margin:0 auto;
border:#CCC;
border-style: solid;
border-top-width: 0;
border-right-width: 1px;
border-bottom-width: 0;
border-left-width: 1px;
}
#cuadro-cont{
width:700px;
margin:15px 0 0 18px;
padding:0;
float:left;
display:inline;
}
#text-servicios1{
width:680px;
margin:25px 18px 0 18px;
padding:0;
float:left;
display:inline;
}
Código:
Como puedo hacer que en todos los navegadores los anclas funcionen igual?function currentYPosition() {
if (self.pageYOffset)
return self.pageYOffset;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
if (document.body.scrollTop)
return document.body.scrollTop;
return 0;
}
function elmYPosition(eID) {
var elm = document.getElementById(eID);
var y = elm.offsetTop;
var node = elm;
while (node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
} return y - 60;
}
function smoothScroll(eID) {
var startY = currentYPosition();
var stopY = elmYPosition(eID);
var distance = stopY > startY ? stopY - startY : startY - stopY;
if (distance < 100) {
scrollTo(0, stopY); return;
}
var speed = Math.round(distance / 100);
var step = Math.round(distance / 25);
var leapY = stopY > startY ? startY + step : startY - step;
var timer = 0;
if (stopY > startY) {
for ( var i=startY; i<stopY; i+=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY += step; if (leapY > stopY) leapY = stopY; timer++;
} return;
}
for ( var i=startY; i>stopY; i-=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
}
}
En ningun navegador funcionan todos los anclas correctamente.
Gracias!!!.
ouchhhhhhhhh!! por 1 minuto 
