Ir a un ancla dentro de una misma pagina web

Siddhartha · #1 (**permalink**) 21/01/2008, 14:09

Hola a todos!!

Alguien sabecomo ir a un ancla de la misma pagina web en la que estoy sin refrescarla.

Gracias!!!

agressor · #2 (**permalink**) 21/01/2008, 14:16

Talvez sea lo que buscas..

Salu2..!

http://www.htmlya.com.ar/temarios/de...od=88&punto=13

Siddhartha · #3 (**permalink**) 21/01/2008, 14:53

Claro, pero lo que busco es un codigo javaScript que vaya al ancla que yo le pida

Panino5001 · #4 (**permalink**) 21/01/2008, 15:10

Si las anclas están definidas correctamente, es decir, con id, esto puede servirte:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function irA(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined" && navigator.appName=="Microsoft Internet Explorer" ) {
offsetLeft += parseInt(document.body.leftMargin);
offsetTop += parseInt(document.body.topMargin);
}
window.scrollTo(offsetLeft,offsetTop)
}
</script>
</head>

<body>
<div id="arriba" onclick="irA('abajo')">aaa</div><br />
<div onclick="irA('centro')">ir al centro</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="centro" onclick="irA('arriba')">estoy en el centro (clik para ir a arriba) </div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="abajo" onclick="irA('arriba')">bbb</div>
</body>
</html>

Siddhartha · #5 (**permalink**) 22/01/2008, 12:26

La verdad, muy bueno. Lo probé con anclas y funciona muy bien.
Me gustaría entender el codigo porque la verdad es que no lo entiendo.

Si alguien me lo quiere explicar soy todo oidos!!

Muchas gracias!!!

Panino5001 · #6 (**permalink**) 22/01/2008, 12:50

offsetTop te devuelve la distancia que hay desde la posición top de un elemento x hasta la posición top del elemento que lo contiene, que se llama offsetParent. Lo que hace el código es acumular las distancias de todos los sucesivos padres, abuelos, bisabuelos, etc, hasta llegar al body, con lo cual se obtiene la posición absoluta del elemento. Y es esa distancia (o posición) la que usamos con scrollTo, para mover el scroll e ir de un elemento a otro ;)

Siddhartha · #7 (**permalink**) 22/01/2008, 15:17

Gracias!!!!!!!!!!!!!!!!!!!!!!!!

ssclamp · #8 (**permalink**) 15/10/2008, 18:05

Jo! Panino5001, este script es muy interesante. Funciona macanudo. Seguro que aplico esta "pseudo navegación interna" en algo.

Muchas gracias.

Saludos

oachon · #9 (**permalink**) 02/02/2010, 20:36

Panino5001 : Simplemente Excelente el codigo, despues de mucho buscar, me vino la solucion!

gabriel_crack · #10 (**permalink**) 15/03/2010, 14:55

Hola gracias Panino5001 por el codigo me sirvio para muchas cosas no solo para lo que estaba buscando

Salco · #11 (**permalink**) 10/05/2010, 09:27

el del Panino5001 está mundial pero este también sirve y sobre todo cuando llamas a unas pestañas en jquery.

Aquí está un ejemplo con un boton que cuando lo pulsas te lleva al ancla llamada "nombre_del_ancla".

<input type='button' name='submit' value='Ir al ancla' onClick="window.location='#nombre_del_ancla'">