Smooth Scroll

salbatore · #1 (**permalink**) 10/10/2008, 19:00

Hola, foreros!:

He estado mirando como hacer lo siguiente:

http://www.dezinerfolio.com/wp-conte...th_scroll.html

Pero no hay forma, jeje. Queria hacerlo sin ninguna libreria, jeje. ¿Sabeis por donde puedo empezar para hacerlo?

Panino5001 · #2 (**permalink**) 11/10/2008, 09:14

Fijate si te sirve algo así:

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> 
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); 
        } 
    }     
})(); 
window.$=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+ 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,$('pppcentro').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,$('pppcentro').getElementPosition().top,.09,20);}) 
    $('pppcentro').addEvent('click',function(){this._scroll($('pppcentro').getElementPosition().top,$('centroarriba').getElementPosition().top,.09,20);}) 
} 
</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> 
</body> 
</html>

salbatore · #3 (**permalink**) 11/10/2008, 14:06

Hola,

Lo he probado y funciona genial!, jeje... es justo lo que buscaba!.

Muchisimas gracias!