Cómo crear: desplazamiento suave

Aprende a usar CSS para crear efectos de desplazamiento suave.

desplazamiento suave

desplazamiento suave

Agregar scroll-behavior: smooth Se puede activar el desplazamiento suave de toda la página:

Nota:También se puede agregar a un elemento/contenedor de desplazamiento específico.

Ejemplo

html {
  scroll-behavior: smooth;
}

Prueba personalmente

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad de desplazamiento.

solución de desplazamiento cruzado

para navegadores que no soportan solución de desplazamiento cruzado para navegadores que no soportan jQuery）para crear una solución compatible con todos los navegadores:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("document").ready(function(){
  // Añade un desplazamiento suave a todos los enlaces
  $("a").on('click', function(event) {
    // Asegúrate de que this.hash tenga un valor antes de sobrescribir el comportamiento predeterminado
    if (this.hash !== "") {
      // Evita el comportamiento de clic predeterminado del ancla
      event.preventDefault();
      // Almacena el valor de la marca
      var hash = this.hash;
      // Añade un desplazamiento de página suave utilizando el método animate() de jQuery
      // Número opcional (800) que especifica los milisegundos necesarios para desplazarse a la área especificada
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){
        // Después de completar el desplazamiento, agrega el guión número (#) a la URL (comportamiento de clic predeterminado)
        window.location.hash = hash;
      );
    } // Final del if
  );
);
</script>

Prueba personalmente

Páginas relacionadas

Manual de referencia:Atributo CSS scroll-behavior