Smooth scrolling: desplazamiento suave entre secciones

Hay veces que queremos hacer un desplazamiento suave (smooth scrolling) entre diferentes secciones de una misma página, evitando una carga brusca sin transición.

Es un efecto que se ve muy a menudo en sitios de página única, donde hay una gran cantidad de contenido y nos desplazamos por ella desde el menú con la ayuda de anclas (anchors).

Ejemplo de smooth scroll

Solución fácil: CSS

html {
  scroll-behavior: smooth;
}

El problema es que esta regla CSS de desplazamiento suave (smooth scrolling) no la reconocen actualmente ni Microsoft Edge ni Safari.

Solución para el resto de exploradores: jQuery / Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Asegurar que this.hash tiene un valor antes de anular el comportamiento por defecto
    if (this.hash !== "") {
      // Evitar en comportamiento por defecto del click a un ancla
      event.preventDefault();

      // Almacenar hash
      var hash = this.hash;

      // Usar el método de jQuery animate() para añadir smooth page scroll
      // El nº (800) especifica el número de milisegundos que tomará el scroll al área seleccionada
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Añade (#) a la URL cuando hecho el scrolling (comportamiento por defecto del click)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

Recordad que podemos descargar jQuery o linkarlo en nuestro html a través de CDN.

El propósito de este desplazamiento suave es realizar un desplazamiento animado al hacer clic de un lugar de la página a la otra. El propósito de esta animación es ayudar al usuario a mantenerse orientado en términos de a dónde se movió al hacer clic, sin perder la perspectiva del resto de la página.


Crédito de la Imagen destacada:

unsplash-logoKid Circus

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar estas etiquetas y atributos HTML:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>