Desplazamiento suave en JavaScript
Este artículo discutirá cómo usar la función de desplazamiento suave en JavaScript. Para el ejemplo, crearemos eventos que llamarán a la función de desplazamiento.
Para mejorar la experiencia de navegación dentro de la página, usamos desplazamiento suave, que es un patrón de interfaz de usuario. Es el cambio de posición de forma animada dentro del cuadro de desplazamiento de la página.
Hay varias formas de crear e implementar ese patrón de desplazamiento con la ayuda de JavaScript, jQuery y cualquier otro complemento, pero ahora usaremos JavaScript con la solución jQuery para esta función.
Desplazamiento suave en JavaScript
En JavaScript, podemos llamar a una función en un evento de clic que cambiará la posición actual de una página web y navegará animadamente a otra posición.
Hay un método predeterminado animate() en jQuery para pasar el objeto desde su posición contenedora con scrollTop, milisegundos como un temporizador, y una función de devolución de llamada llamada después de que se completa el desplazamiento.
Código de ejemplo:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// smooth scrolling function on anchor tag
$("a").on('click', function(event) {
// if this.hash contain value
if (this.hash !== "") {
//default anchor click prevention
event.preventDefault();
// save hash
var myHash = this.hash;
// jQuery animate() method to call scroll
// 1200 milliseconds takes to scroll to the desired area
$('html, body').animate({
scrollTop: $(myHash).offset().top
}, 1200, function(){
// when done scroll add # to URL
window.location.hash = myHash;
});
} // End if
});
});
</script>
<style>
#section_top {
height: 600px;
border-style: solid;
border-width: 1px;
padding:5px
}
#section_down {
height: 600px;
border-style: solid;
border-width: 1px;
padding:5px
}
</style>
</head>
<body>
<h1>Delftstack learning</h1>
<h4>Smooth scrolling using JavaScript.</h4>
<div class="main" id="section_top">
<h2>Top Section</h2>
<a href="#section_down">Click here to Smooth Scroll to down Section</a>
</div>
<div class="main" id="section_down">
<h2>Down Section</h2>
<a href="#section_top">Click here to Smooth Scroll to top Section</a>
</div>
</body>
</html>
En el código fuente HTML anterior, hemos creado varias secciones utilizando elementos <div> de HTML y CSS. Hemos definido ID para las secciones para cambiar la posición e implementar estilos.
Hemos creado una etiqueta de anclaje en ambas secciones y hemos definido href para ese elemento. En el encabezado de la página HTML, hemos incluido un enlace de jQuery para usar el método predeterminado de jQuery animate().
Hemos llamado a la función de desplazamiento al hacer clic en la etiqueta de anclaje en la etiqueta del script. Dentro de la función de desplazamiento, debemos verificar el valor hash; si tiene un valor, entonces continúa la ejecución.
Hemos evitado el comportamiento predeterminado de la etiqueta de anclaje y hemos guardado el hash actual. Hemos llamado a la función jQuery animate() con un temporizador de 1200 milisegundos y la posición de desplazamiento deseada.
Puede guardar la fuente anterior con una extensión HTML y abrirla en cualquier navegador para ver el resultado de un desplazamiento suave.