Foros del Web - Ver Mensaje Individual

IsaBelM · #30 (**permalink**) 05/08/2013, 14:27

Scroll Suave (Smooth Scrolling) ----> compatibilidad : todos los navegadores modernos incluido ie8

Código:

<!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 Suave</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border: none;
	position: relative;
}



body {
	width: 100%;
	height: 100%;
}



a {
outline: 0;
}



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 {
	height: 1.55em;
	width: 8.92em;
	margin-top: 1.6em;
}



div#header div#menu > ul li > a {
	top: 18%;
	color: rgb(224, 220, 220);
	font: 0.9em Tahoma;
	text-decoration: none;
}


div#secciones > div {
	width: 100%;
	height: 700px;
	color: white;
}


.rojo {
	background-color: red;
}


.verde {
	background-color: green;
}


.azul {
	background-color: blue;
}
</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);
},



obtenerEvento : function(event) {

	return (event) ? event : window.event;
}

}




function ini() {

var menu = document.querySelector('#lista').getElementsByTagName('li');

	for (var i = 0; i < menu.length; i++) {

		lib.Evento(menu[i], 'click', function(event) {scrollAncla(this.firstChild.getAttribute('href').split('#')[1], event);});
	}
}





function scrollAncla(elem, e) {

	var evt = lib.obtenerEvento(e);

	if (evt.preventDefault) {
	
		evt.preventDefault();
		evt.stopPropagation();

	} else {

		evt.returnValue = false;
		evt.cancelBubble = true;
	}


	var grupo = document.getElementById(elem), offsetTop = -parseInt(lib.cssComputado(document.querySelector('#base-menu'), 'height'), 10);


	while(grupo.offsetParent) {

		offsetTop += grupo.offsetTop;
		grupo = grupo.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);
	})();

}


window.onload = function() { ini(); };
</script>
</head>
<body>

<div id="header">
		<div id="base-menu"></div>
		<div id="menu">
			<ul id="lista">
				<li><a href="#seccion1">sección 1</a></li>
				<li><a href="#seccion2">sección 2</a></li>
				<li><a href="#seccion3">sección 3</a></li>
			</ul>
		</div>
	</div>


<div id="secciones">
	<div class="rojo" id="seccion1">sección 1</div>
	<div class="verde" id="seccion2">sección 2</div>
	<div class="azul" id="seccion3">sección 3</div>
</div>




<!-- ignorar -->
<script type="text/javascript">
//<![CDATA[
var browserList = { //Indicar compatibilidad si fué probada 1=compatible
'Firefox':1,
'IE8':1,
'IE9':1,
'Chrome':1,
'Opera':1,
'Safari(win)':1
},
// no modificar desde aquí
result = ''; for(var browser in browserList) {result += browserList[browser] === 1 ? browser + ' ' : '';};
//]]>
</script>
<script type="text/javascript" src="code/pie.js"></script>
<!-- ignorar -->

</body>
</html>