<!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=utf-8" />
<title>scroll de página</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}
body {
width: 100%;
height: 100%;
}
div#header {
z-index: 99;
}
div#header div#base-menu {
height: 5em;
}
div#header div#menu {
background-color: rgb(17, 9, 9);
color: rgb(224, 220, 220);
width: 100%;
height: 5em;
position: fixed;
left: 0;
top: 0;
}
div#header div#menu ul {
overflow: hidden;
}
div#header div#menu > ul li {
list-style: none;
float: left;
text-align: center;
}
div#header div#menu > ul li {
width: 8.92em;
height: 3.5em;
padding-top: 2em;
color: rgb(224, 220, 220);
font: 0.9em Tahoma;
cursor: pointer;
}
div#secciones > div.seccion {
width: 100%;
color: rgb(255, 255, 255);
}
div#secciones > div.rojo {
height: 1000px;
background-color: rgb(255, 0, 0);
}
div#secciones > div.verde {
height: 500px;
background-color: rgb(0, 128, 0);
}
div#secciones > div.azul {
height: 700px;
background-color: rgb(0, 0, 255);
}
</style>
<script type="text/javascript">
var velocidadScroll = 0.6; // velocidad con la que se realizará el scroll automático - rango de valores (0.1 - 1.5). siendo 0.1 la velocidad más alta
var empiezaDeceleracion = 400; // px que restan hasta alcanzar el objeto en el scroll automático. una vez que la diferencia es menor a la indicada, empieza la deceleración
var lib = {
Evento : function(elemento, nomevento, fnc) {
if (elemento.addEventListener) {
elemento.addEventListener(nomevento, fnc, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento, window.event);});
}
},
cssComputado : function(obj, styleProp) {
if (obj == null) { return 0; }
if (window.getComputedStyle) {
var valor = window.getComputedStyle(obj, null)[styleProp];
} else if (obj.currentStyle) {
var valor = (parseInt(obj.currentStyle[styleProp], 10) * 16) + 'px';
}
return valor;
},
alturaScroll : function() {
return self.pageYOffset || (document.documentElement.scrollTop + document.body.scrollTop);
}
}
function init() {
var menu = document.querySelector('#lista').getElementsByTagN ame('li');
var seccion = document.querySelectorAll('.seccion');
for (var i = 0; i < menu.length; i++) {
(function(i) {
lib.Evento(menu[i], 'click', function() {scrollAncla(seccion[i]);});
})(i);
}
}
function scrollAncla(elem) {
var offsetTop = -parseInt(lib.cssComputado(document.querySelector(' #base-menu'), 'height'), 10);
while(elem.offsetParent) {
offsetTop += elem.offsetTop;
elem = elem.offsetParent;
}
var empieza = new Date().getTime();
var actT = lib.alturaScroll();
var controlaVelocidad = (actT > offsetTop) ? parseInt(actT * velocidadScroll, 10) : parseInt(offsetTop * velocidadScroll, 10);
var intervalo = false;
var scrll = actT;
var scrll2 = 0;
(function scrolea() {
setTimeout(function() {
var ahora = new Date().getTime();
if ((ahora - empieza) < controlaVelocidad && Math.abs(scrll - offsetTop) > empiezaDeceleracion) {
var avance = ((ahora - empieza) / controlaVelocidad);
scrll = (actT > offsetTop) ? Math.floor(actT - ((actT - offsetTop) * avance)) : Math.ceil(actT + ((offsetTop - actT) * avance));
window.scrollTo(0, scrll);
scrolea();
} else {
var empieza2 = new Date().getTime();
(function decelera() {
setTimeout(function() {
var ahora2 = new Date().getTime();
if ((ahora2 - empieza2) < (empiezaDeceleracion * 3)) {
var avance2 = ((ahora2 - empieza2) / (empiezaDeceleracion * 3));
scrll2 = (scrll > offsetTop) ? Math.floor(scrll - ((scrll - offsetTop) * avance2)) : Math.ceil(scrll + ((offsetTop - scrll) * avance2));
window.scrollTo(0, scrll2);
decelera();
} else {
var avance2 = 1;
scrll2 = (scrll > offsetTop) ? Math.floor(scrll - ((scrll - offsetTop) * avance2)) : Math.ceil(scrll + ((offsetTop - scrll) * avance2));
window.scrollTo(0, scrll2);
}
}, 1)
})();
}
}, 1);
})();
}
lib.Evento(window, 'load', init);
</script>
</head>
<body>
<div id="header">
<div id="base-menu"></div>
<div id="menu">
<ul id="lista">
<li>sección 1</li>
<li>sección 2</li>
<li>sección 3</li>
</ul>
</div>
</div>
<div id="secciones">
<div class="seccion rojo">sección 1</div>
<div class="seccion verde">sección 2</div>
<div class="seccion azul">sección 3</div>
</div>
</body>
</html>
