Efecto de anclaje

pato12 · #1 (**permalink**) 12/10/2008, 18:53

Hola,
Estuve viendo que en algunas web tienen un efecto de anclaje, que el scroll
va deslizándose hacia su punto y no aparece de repente.
¿Como se puede hacerlo?
Gracias
Salu2

Panino5001 · #2 (**permalink**) 12/10/2008, 19:14

Hace poco preguntaron lo mismo. Fijate si te sirve:

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" /> 
<style> 
html,body{overflow:hidden;} 
body{visibility:hidden;} 
div{ background-color:orange; color:#FFF; width:100px; text-align:center; cursor:pointer; border:1px dashed black; } 
</style> 
<title>test</title> 
<script> 
var zz=(function(){ 
/* ---- métodos privados ---- */ 
    var metodosPrivados={ 
        addEvent: function(type, fn ) { 
            if ( this.addEventListener ) { 
                this.addEventListener( type, fn, false ); 
            } else if(this.attachEvent){ 
                var _this=this; 
                var f= function(){fn.call(_this,window.event);} 
                this.attachEvent( 'on'+type, f); 
                this[fn.toString()+type]=f; 
            }else{ 
                this['on'+type]=fn; 
            } 
            return this; 
        }, 
        removeEvent: function(type, fn ) { 
            if( this.removeEventListener){ 
                this.removeEventListener( type, fn, false ); 
            } 
            else if(this.detachEvent){ 
                this.detachEvent('on'+type,this[fn.toString()+type]); 
                this[fn.toString()+type]=null; 
            } 
            else{ 
                  this['on'+type]=function(){}; 
            } 
            return this; 
            } 
    } 
/* ---- métodos públicos ---- */ 
    return{ 
        extend:function(el,obj){ 
            for(var i in obj) 
                el[i]=obj[i]; 
            return el; 
        }, 
        get:function(id){ 
            return zz.extend(document.getElementById(id),metodosPrivados); 
        }, 
        add:function(obj){ 
            zz.extend(metodosPrivados,obj); 
        } 
    }     
})(); 
var $=zz.get; 
var efectos={ 
    _scroll:function(inicio,fin,coef,pausa){ 
        var tmp=[]; 
        var _this=this; 
        if(_this.intervalo) 
            clearInterval(_this.intervalo); 
        scrollTo(0,inicio); 
        this.test=0; 
        this.pausa=pausa; 
        this.val=inicio; 
        this.intervalo=setInterval( 
            function(){ 
                tmp[_this.test]=_this.val; 
                if(_this.test>1 && tmp[tmp.length-2]==tmp[tmp.length-1]){ 
                    _this.val=fin; 
                    scrollTo(0,_this.val); 
                      clearInterval(_this.intervalo); 
                } 
                _this.test++; 
                var r=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop); 
                   _this.val=r+(fin-r) * coef; 
                //_this.val=r+Math.min(5,((fin-r) * coef)); 
                scrollTo(0,_this.val); 
            },this.pausa); 
        return this; 
    }, 
    getElementPosition:function() { 
        var offsetTrail = this; 
        var offsetLeft = 0; 
        var offsetTop = 0; 
        while (offsetTrail) { 
            offsetLeft += offsetTrail.offsetLeft; 
            offsetTop += offsetTrail.offsetTop; 
            offsetTrail = offsetTrail.offsetParent; 
        } 
         
        return {left:offsetLeft, top:offsetTop}; 
    }  
} 
zz.add(efectos); 
onload=function(){ 
    $('pp').addEvent('click',function(){this._scroll($('pp').getElementPosition().top,$('ppp').getElementPosition().top,.09,20);}); 
    $('ppp').addEvent('click',function(){this._scroll($('ppp').getElementPosition().top,$('pp').getElementPosition().top,.09,20);}); 
    $('ppcentro').addEvent('click',function(){this._scroll($('ppcentro').getElementPosition().top,$('centroarriba').getElementPosition().top,.09,20);}); 
    $('centroarriba').addEvent('click',function(){this._scroll($('centroarriba').getElementPosition().top,$('pp').getElementPosition().top,.09,20);}) 
     
    $('centroabajo').addEvent('click',function(){this._scroll($('centroabajo').getElementPosition().top,$('ppp').getElementPosition().top,.09,20);}) 
    $('pppcentro').addEvent('click',function(){this._scroll($('pppcentro').getElementPosition().top,$('centroarriba').getElementPosition().top,.09,20);}) 
    document.body.style.visibility='visible'; 
} 
</script> 
</head> 
<body> 
<div id="pp">abajo</div> 
<div id="ppcentro">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 /> 
<div id="centroarriba">arriba</div> 
<div id="centroabajo">abajo</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 /> 
<div id="ppp">arriba</div> 
<div id="pppcentro">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 /> 
</body> 
</html>

pato12 · #3 (**permalink**) 12/10/2008, 19:27

Hola,
Esta tal cual lo que buscaba.
Pero como puedo hacer para que envés de:

Código HTML:

onload=function(){ 
    $('pp').addEvent('click',function(){this._scroll($('pp').getElementPosition().top,$('ppp').getElementPosition().top,.09,20);}); 
    $('ppp').addEvent('click',function(){this._scroll($('ppp').getElementPosition().top,$('pp').getElementPosition().top,.09,20);}); 
    $('ppcentro').addEvent('click',function(){this._scroll($('ppcentro').getElementPosition().top,$('centroarriba').getElementPosition().top,.09,20);}); 
    $('centroarriba').addEvent('click',function(){this._scroll($('centroarriba').getElementPosition().top,$('pp').getElementPosition().top,.09,20);}) 
     
    $('centroabajo').addEvent('click',function(){this._scroll($('centroabajo').getElementPosition().top,$('ppp').getElementPosition().top,.09,20);}) 
    $('pppcentro').addEvent('click',function(){this._scroll($('pppcentro').getElementPosition().top,$('centroarriba').getElementPosition().top,.09,20);}) 
    document.body.style.visibility='visible'; 
}

Pongo:

Código HTML:

<a href="#abajo" name="arriba">Abajo</a>
<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 /> 
<a href="#arriba" name="abajo">Arriba</a>
<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 />

Gracias
Salu2