Cómo suavizar un scroll

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.