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>