Si queremos que al pulsar en un hipervínculo, o ancla, se desplace de manera suave y lenta, en lugar ser instantáneo, podemos optar por usar algunos de siguientes 3 trucos. Pasando por CSS, JavaScript o JQuery. El artículo no cubre la forma de realizar un ancla, aunque puedes aprender en mi curso gratuito de HTML.
DEMO
Versión solo con CSS
Al añadir el siguiente CSS conseguirás que los movimientos de tus anclas sean suaves en lugar de instantáneos.
body {
scroll-behavior: smooth;
}
En el momento que se escribió este artículo no era compatible con Safari.
Versión solo con JavaScript Vainilla
En caso contrario de que no funcione como esperas podrás usar un poco de JavaScript para conseguir el mismo efecto.
<script>
document.addEventListener('DOMContentLoaded', () => {
//===
// SCROLL SMOOTH
//===
// Variables
const links = document.querySelectorAll('a[href *= "#"]:not([href = "#"])');
/**
* Event scroll
*/
function clickHandler(event) {
event.preventDefault();
const href = this.getAttribute("href");
const offsetTop = document.querySelector(href).offsetTop;
scroll({
top: offsetTop,
behavior: "smooth"
});
}
// Add event all links
links.forEach((link) => link.addEventListener("click", clickHandler));
});
</script>
Versión solo con JQuery
Y por último, en caso de que aún así no funcione; puedes recurrir a un clásico que nunca te va a fallar y ha sido utilizado durante muchos años.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('a[href *= "#"]:not([href = "#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
let target = $(this.hash);
target = target.length ? target : $('[name = ' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
Obviamente necesitarás que esté presente JQuery en tu proyecto web.
{{ comments.length }} comentarios