Hola

Te dejo una rutina que te puede ayudar con tu problema.

<script type="text/javascript">
var timeout = null;
var increment = 30;
var speed = 10;
function goto_anchor_up(name) {
        clearTimeout(timeout);
        var anchor = document.getElementById(name);
        var container = document.getElementById("container");
        var ot = anchor.offsetTop;
        var st = container.scrollTop;
        if(st < ot) {
                container.scrollTop += (((st + increment) > ot)? (ot - st): 
increment);
                timeout = setTimeout("goto_anchor_up('" + name + "');", speed);
        }
}

function goto_anchor_down(name) {
        clearTimeout(timeout);
        var anchor = document.getElementById(name);
        var container = document.getElementById("container");
        var ot = anchor.offsetTop;
        var st = container.scrollTop;
        if(st > ot) {
                container.scrollTop -= (((st - increment) < ot)? (st - ot): 
increment);
                timeout = setTimeout("goto_anchor_down('" + name + "');", 
speed);
        }
}

function goto_anchor(name) {
        clearTimeout(timeout);
        var ot = document.getElementById(name).offsetTop;
        var st = document.getElementById("container").scrollTop;
        if(st < ot) {
                timeout = setTimeout("goto_anchor_up('" + name + "');", speed);
        } else if(st > ot) {
                timeout = setTimeout("goto_anchor_down('" + name + "');", 
speed);
        }
        return false;
}
</script>


En tus links debes poner lo siguiente:

<a href="#" title="Quienes somos (q)" accesskey="q" 
onclick="goto_anchor('uno');">Quienes somos</a>

Luego elimina los anchors y escribes un id a cada título:

<h2 id="uno">Quienes somos</h2>
<h2 id="dos">Qué hacemos</h2>
<h2 id="tres">Nuestos clientes</h2>
<h2 id="cuatro">Dónde estamos</h2>

Si deseas que corra más rápido sólo cambia el increment o el speed.

Juan Garcés


El sáb, 22-07-2006 a las 13:24 -0400, Gunther Gonzalez escribió:
> Hola!
> 
> Estoy realizando un diseño con un layout Cross browser de Header y Footer
> fijo y el contenido es el que se mueve, basado en el que aparece aquí:
> http://www.cssplay.co.uk/layouts/fixit.html
> 
> En el header tengo enlaces a anclas (Anchors <a name>) que estan en  el
> contenido de la pagina.  Pero quiero que al hacer click en los enlaces no se
> vaya de golpe a las anclas sino que vaya desdendiendo o ascendiendo
> suavemente el scroll. Encontré un script a mi parecer muy bueno y que hace
> el trabajo perfectamente:
> http://www.sitepoint.com/article/scroll-smoothly-javascript
> 
> El problema que estoy teniendo es que el Layout de CSS Play elimina el
> scroll del body y lo pone solo en el div del contenido con un overflow:
> auto. Cuando el JS va al ancla no se ve el efecto pq el JS en realidad esta
> bajando el scroll de la ventana pero como en realidad la ventana no tiene
> scroll sino solo el div no me hace el trabajo.
> 
> Lo que necesito es modificar el JS para que en vez de hacer scroll a la
> ventana me haga scroll en el DIV. y la verdad no sé como hacerlo. Alguien
> tiene alguna idea? o alguna otra solucion?
> 
> La pagina la tengo en www.igloo.com.ve/web, alli pueden observar lo que
> estoy haciendo.
> 
> Muy agradecido de antemano por su ayuda...
> 

_______________________________________________
javaEScript mailing list
javaEScript@scriptia.net
http://lists.scriptia.net/listinfo.cgi/javaescript-scriptia.net

Responder a