Buenas a tod@s!!
Hoy vamos a ver como hacer un scrolling de manera bonita, sin que el usuario quede desubicado y no sepa donde está.
Primero veamos como se hace el scrolling tradicional en javascript (el que te desmonta cuando estás navegando y le das)
La función scrollBy hace un scroll en las coordenadas x e y respectivamente.
Lógicamente si ejecutáis este código no habrá mucho con lo que hacer scroll, llenad la página de texto o saltos de línea para comprobarlo.
Ahora vamos a utilizar JQuery para hacer un scroll bonito, esté bajará suavemente permitiendo una mejor experiencia para el usuario.
Con la función scrollTo, lo que hacemos es situar el scroll en la id que seleccionamos en el primer parámetro, con un retardo (animación) de 1000 ms (2º parámetro), y afectando al eje y que seleccionamos en el tercer parámetro.
Hoy vamos a ver como hacer un scrolling de manera bonita, sin que el usuario quede desubicado y no sepa donde está.
Primero veamos como se hace el scrolling tradicional en javascript (el que te desmonta cuando estás navegando y le das)
<html>
<head>
<script>
function scroll() {
window.scrollBy(0,50);
}
</script>
</head>
<body>
<a href="#" onclick="scroll(); return false;">scroll down</a>
</body>
</html>
<head>
<script>
function scroll() {
window.scrollBy(0,50);
}
</script>
</head>
<body>
<a href="#" onclick="scroll(); return false;">scroll down</a>
</body>
</html>
La función scrollBy hace un scroll en las coordenadas x e y respectivamente.
Lógicamente si ejecutáis este código no habrá mucho con lo que hacer scroll, llenad la página de texto o saltos de línea para comprobarlo.
Ahora vamos a utilizar JQuery para hacer un scroll bonito, esté bajará suavemente permitiendo una mejor experiencia para el usuario.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
function scroll() {
$.scrollTo($("#abajo"), 1000, {axis:'y'});
}
</script>
</head>
<body>
<a href="#" onclick="scroll(); return false;">scroll down</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p id="abajo"> Bajar aquí </p>
</body>
</html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
function scroll() {
$.scrollTo($("#abajo"), 1000, {axis:'y'});
}
</script>
</head>
<body>
<a href="#" onclick="scroll(); return false;">scroll down</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p id="abajo"> Bajar aquí </p>
</body>
</html>
Con la función scrollTo, lo que hacemos es situar el scroll en la id que seleccionamos en el primer parámetro, con un retardo (animación) de 1000 ms (2º parámetro), y afectando al eje y que seleccionamos en el tercer parámetro.
Fatal
ResponderEliminar