Cómo suavizar un scroll

2 minutos

cookie

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.

Donación con recompensa

  • 1 café: Respondo a tu duda en los comentarios.
  • 2 cafés: Respondo en menos de 24h a tu comentario.
  • 3 cafés: Todo lo anterior y además te doy las gracias en mis redes.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...