Cómo suavizar un scroll | Programador Web Valencia

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.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

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...