¿Cómo desplazar la página hacia arriba o hacia abajo usando el elemento de anclaje en jQuery?

El problema es incluir un efecto de deslizamiento cada vez que hacemos clic en un ancla local y queremos desplazarnos hacia arriba o hacia abajo en la página en consecuencia. Anteriormente, podemos hacerlo de forma nativa utilizando la propiedad CSS.

Sintaxis:

a {
  scroll-behavior: smooth;
}

Ahora, con la ayuda de jQuery, podemos hacerlo usando los siguientes dos métodos:

  • Método jQuery.offset(): Este método nos permite recuperar la posición actual de cualquier elemento relativo al documento. Este método es particularmente útil cuando queremos realizar operaciones de arrastrar y soltar o cuando queremos colocar el nuevo elemento encima de otro elemento existente.
  • Método jQuery.animate(): Este método permite crear animaciones sobre cualquier propiedad CSS numérica. Se requiere un objeto CSS para usar el método. Podemos usar esto para animar propiedades con estilo y sin estilo.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to scroll the page up or down
        using anchor element in jQuery ?
    </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
  
    <script>
        $(document).ready(function () {
  
            // Add smooth scrolling to all links
            $("a").on('click', function (event) {
  
                // Make sure this.hash has a value
                // before overriding default behavior
                if (this.hash !== "") {
  
                    // Prevent default anchor
                    // click behavior
                    event.preventDefault();
  
                    // Store hash
                    var hash = this.hash;
  
                    // Using jQuery's animate() method 
                    // to add smooth page scroll
                    // The optional number (800) specifies
                    // the number of milliseconds it takes
                    // to scroll to the specified area
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top
                    }, 500, function () {
  
                        // Add hash (#) to URL when done 
                        // scrolling (default click behavior)
                        window.location.hash = hash;
                    });
                } // End if
            });
        });
    </script>
  
    <style>
        body,
        html, .primary {
            height: 150%;
        }
  
        section {
            min-height: 150%;
        }
    </style>
</head>
  
<body>
    <div>
        <a href="#section1">
            Click Me to Smooth Scroll
            to Section 1 Below
        </a>
    </div>
    <div>
        <a href="#section2">
            Click Me to Smooth Scroll
            to Section 2 Below
        </a>
    </div>
    <div>
        <a href="#section3">
            Click Me to Smooth Scroll
            to Section 3 Below
        </a>
    </div>
  
    <div class="primary">
        <section></section>
    </div>
      
    <div class="primary" id="section1">
        <section style="background-color:cyan"></section>
    </div>
      
    <div class="primary" id="section2">
        <section style="background-color:yellow"></section>
    </div>
      
    <div class="primary" id="section3">
        <section style="background-color:red"></section>
    </div>
</body>
  
</html>

Producción:

  • Antes del efecto de desplazamiento en la Sección 1:
    Antes del efecto de desplazamiento
  • Después del efecto de desplazamiento en la Sección 1, vamos a Cyan Colored Box como en Code:
    Después del efecto de desplazamiento

Publicación traducida automáticamente

Artículo escrito por ankurgokhale05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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