El problema es incluir un efecto de deslizamiento cada vez que hacemos clic en un ancla local y queremos desplazarnos hacia arriba o hacia abajo en la página en consecuencia. Anteriormente, podemos hacerlo de forma nativa utilizando la propiedad CSS.
Sintaxis:
a {
scroll-behavior: smooth;
}
Ahora, con la ayuda de jQuery, podemos hacerlo usando los siguientes dos métodos:
- Método jQuery.offset(): Este método nos permite recuperar la posición actual de cualquier elemento relativo al documento. Este método es particularmente útil cuando queremos realizar operaciones de arrastrar y soltar o cuando queremos colocar el nuevo elemento encima de otro elemento existente.
- Método jQuery.animate(): Este método permite crear animaciones sobre cualquier propiedad CSS numérica. Se requiere un objeto CSS para usar el método. Podemos usar esto para animar propiedades con estilo y sin estilo.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to scroll the page up or down
using anchor element in jQuery ?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
// Add smooth scrolling to all links
$("a").on('click', function (event) {
// Make sure this.hash has a value
// before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor
// click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method
// to add smooth page scroll
// The optional number (800) specifies
// the number of milliseconds it takes
// to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 500, function () {
// Add hash (#) to URL when done
// scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
<style>
body,
html, .primary {
height: 150%;
}
section {
min-height: 150%;
}
</style>
</head>
<body>
<div>
<a href="#section1">
Click Me to Smooth Scroll
to Section 1 Below
</a>
</div>
<div>
<a href="#section2">
Click Me to Smooth Scroll
to Section 2 Below
</a>
</div>
<div>
<a href="#section3">
Click Me to Smooth Scroll
to Section 3 Below
</a>
</div>
<div class="primary">
<section></section>
</div>
<div class="primary" id="section1">
<section style="background-color:cyan"></section>
</div>
<div class="primary" id="section2">
<section style="background-color:yellow"></section>
</div>
<div class="primary" id="section3">
<section style="background-color:red"></section>
</div>
</body>
</html>
Producción:
- Antes del efecto de desplazamiento en la Sección 1:
- Después del efecto de desplazamiento en la Sección 1, vamos a Cyan Colored Box como en Code:
Publicación traducida automáticamente
Artículo escrito por ankurgokhale05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA