link interno con efecto desaceleracion

fdwwdf · #1 (**permalink**) 09/07/2008, 06:18

Hola soy nuevo por aqui. He intentado buscar info sobre un efecto de links internos pero no encuentro nada. Se trata de un simple <a href="#top">top</a>
<a name="top" id="top"></a> pero que cuando se clique haga un efecto de desaceleración.

Lo he visto por ejemplo en http://www.mdmsrl.it/portfolio.html y en http://alexsancho.name/

Aqui he encontrado un codigo pero no funciona: http://pastie.org/36461

Alguien ha hecho algo similar o sabe como hacerlo?

Se lo agradezco.

GatorV · #2 (**permalink**) 09/07/2008, 12:20

Tema trasladado a Javascript.

buzu · #3 (**permalink**) 09/07/2008, 14:32

Me dio curiosidad tu pregunta y empece a desarrollar algo. Te dejo el código de lo que llevo hasta ahora. No esta terminado aun pero ya hace lo que tu quieres. Lo eh probado en Firefox y Safari y funciona bien.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>ScrollingSpeed</title>
	<script type="text/javascript">
		function scroll(elemento, destino){
			var posicion = window.scrollY;
			var scrolla = (destino - posicion)/5;
			nuevoscroll = posicion += scrolla
			window.scrollTo(0, nuevoscroll);
			if(window.scrollY >= (destino - 10) && window.scrollY <= (destino +10)){
				clearInterval(intervalo);
			}
			
		}
		function scroller(elemento, destino){
			intervalo = setInterval(function(){scroll(elemento, destino);}, 1);
		}
	</script>
</head>
<body id="cuerpo">
	<div id="contenido">
		<a href="" onclick="scroller('contenido', 4000); return false;">Abajo</a>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<p>algo de contenido</p>
		<a href="" onclick="scroller('contenido', 400); return false;">Arriba</a>
	</div>
</body>
</html>

Falta por hacer:

Pulir las funciones
Agregar metodos para que puedas especificar un id en destino
lograr integrar window.scrollMaxY en Safari
Probar en windows y resolver los problemas que me pueda encontrar.

Saludos.

Pd. Hay partes de código que no tiene nada que hacer ahí. Son remanentes de las primeras pruebas. Como dije, me falta pulir las funciones.

fdwwdf · #4 (**permalink**) 10/07/2008, 07:51

Gracias, pero y si quiero ir a un punto intermedio? Aparte de uqe no baja hasta abajo y a veces se queda atascado.. no se porque

buzu · #5 (**permalink**) 10/07/2008, 09:58

La función recibe dos parámetros, uno se llama elemento, el cual no debería estar ahí, como dije tengo que pulir y limpiar las funciones, y el otro se llama destino que es a donde quieres que llegue el scroll. Eso responde a tus dos preguntas, si quieres que valla a un punto medio tan solo pasa en el segundo parámetro el valor de la posición a la que quieres que se dirija y si no llega hasta abajo es por que no se le ha especificado que llegue hasta abajo. Cuando dices que se queda atorado me imagino que es cuando quieres hacerlo ir hacia arriba. No se queda atorado, es solo que simplemente no se le ha pedido que valla hasta arriba de la pagina.

Analiza el código mas detenidamente para que veas como funciona.