4 métodos para desplazarse al elemento en jQuery

1. Requisitos previos para desplazarse al elemento en jQuery
2. jQuery Scroll to Element - Desplazarse en la ventana del documento
3. jQuery Animate ScrollTop - Desplazamiento suave con el método animate
4. jQuery ScrollTop a enlace interno - Desplazamiento suave jQuery
5. jQuery Desplazarse al elemento dentro de un contenedor
6. Consejos a tener en cuenta
7. Dos atajos rápidos para jQuery ScrollTop

Mostramos soluciones fáciles para desplazarse a un elemento para diferentes casos de uso en jQuery. Usamos los métodos scrollTop() y offset(), pero también demostramos una nueva forma con position().

Verá cómo animar el desplazamiento suave con jQuery. Finalmente, demostramos dos atajos comunes y algunos consejos para evitar errores.

Requisitos previos para desplazarse al elemento en jQuery

1. scrollTop()
2. offset()
3. posición()

Primero, veamos los métodos que usaremos para desplazarnos a un elemento en jQuery.

scrollTop()

El método scrollTop() de jQuery nos permite obtener y establecer la propiedad scrollTop de cualquier elemento. El valor de la propiedad scrollTop es el número de píxeles que el contenido de un elemento está actualmente desplazado verticalmente.

Puede saber más sobre la propiedad scrollTop aquí.

.scrollTop() - Obtener el valor actual de scrollTop

Usamos scrollTop() sin ningún argumento para devolver el valor del valor actual scrollTop de un elemento.

console.log($('#container').scrollTop());

Vemos el valor de la vista scrollTop del elemento en la consola. Desplacemos ahora el elemento a una posición diferente y registremos el valor de la propiedad scrollTop nuevamente.

Aquí, vemos que la consola registra un valor diferente. El método jQuery scrollTop() en este formulario get es clave para lograr nuestro efecto de desplazamiento.

.scrollTop(val) - Establecer el nuevo valor scrollTop

Podemos pasar el valor al que queremos desplazarnos (verticalmente) en el método jQuery scrollTop() en el formulario set.

$('document.documentElement').scrollTop(0);

Esto desplaza el documento principal hacia arriba porque le pasamos el valor 0. Veremos esto de nuevo como un atajo útil.

Pasaremos algunos valores clave a esta forma de set de scrollTop() para lograr nuestro desplazamiento de jQuery al comportamiento del elemento.

Puede conocer la función jQuery scrollTop() en detalle aquí.

offset() - Encuentre la posición de un elemento para ayudar a implementar el desplazamiento suave en jQuery

El método offset() de jQuery nos permite determinar la posición actual de cualquier elemento del documento. Este método devuelve dos propiedades, top y left; estos son el número de píxeles del cuadro de borde del documento (es decir, sin los márgenes).

console.log(`The position of the element w.r.t document is : ${
    $('#container').offset().top}`);

El método offset() muestra la posición superior del elemento en relación con el documento.

Lea más sobre el método jQuery offset() aquí.

position() - Otra forma de implementar Scroll to Element en jQuery

El método position() es similar al método offset() con una pequeña diferencia: devuelve la posición del elemento en relación con su padre más cercano. Entonces, cuando ajustamos la posición relativa de un elemento, por ejemplo, para animar scrolltop en jQuery, el método position() es útil.

Puede obtener los detalles sobre el método jQuery position() en este enlace.

position() devuelve la posición del elemento, incluidos sus márgenes (aquí, difiere del método offset()).

// displays the position w.r.t. its closest parent

console.log(`This is the position of the element w.r.t. its closest parent:
${$('.filler:first').position().top}`);

// the offset() method displays position relative to the document

console.log(`This is the position of the element w.r.t. the document:
${$('.filler:first').offset().top}`);

Con los conceptos básicos fuera de nuestro camino, vayamos a desplazarnos a un elemento para diferentes casos de uso en jQuery.

jQuery Scroll to Element - Desplazarse en la ventana del documento

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').offset().top);
});

1. #clickButton es el botón para hacer clic para desplazarse al elemento de destino.
2. #scrollToMe es el elemento al que queremos desplazarnos.

Desglosemos el código:

Adjuntamos un controlador de eventos a nuestro botón con el método .on. El evento para activar este controlador es el primer argumento, el evento "click".

Cuando el usuario hace clic en el botón, el código ejecuta la función de devolución de llamada (anónima) en el segundo argumento del método .on.

Primero seleccionamos todo el documento para desplazarnos con cualquiera de los dos argumentos del selector: document.documentElement, que es el elemento raíz, o en este caso, el elemento html y el elemento document.body.

Luego ejecutamos el método scrollTop() en este elemento en su forma set (ver arriba). Queremos scrollTop() a nuestro elemento de destino - el elemento de imagen con el ID #scrollToMe.

Entonces, primero encontramos el número de píxeles desde la parte superior de la página hasta este elemento de imagen de destino con el método offset().top; recuerde que este método encuentra la posición relativa al documento.

Luego, pasamos este valor al método scrollTop() adjunto al elemento raíz/cuerpo del documento. Entonces, toda la página web se mueve al elemento de imagen de destino, como se ve en la demostración de video anterior.

Por lo tanto, este método logra fácilmente el desplazamiento de jQuery al comportamiento del elemento.

Pero, sinceramente, este desplazamiento instantáneo al elemento de destino parece aburrido. Agreguemos más código para obtener el agradable efecto jQuery de desplazamiento suave.

jQuery Animate ScrollTop - Desplazamiento suave con el método animate

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).animate({scrollTop: $('#scrollToMe').offset().top}, 500)
});

El código es similar al método anterior. Solo ejecutamos el método animate() en el elemento raíz/cuerpo seleccionado.

Un primer argumento es un objeto con los pares CSS de destino propiedad:valor que queremos animar.

Aquí, solo queremos cambiar la propiedad scrollTop para llegar a nuestro elemento de imagen de destino. Entonces, asignamos el valor del número de píxeles desde la parte superior de la página a la imagen.

Esto lo descubrimos con el método .offset().top en el elemento de la imagen, al igual que en el método anterior.

jQuery ScrollTop a enlace interno - Desplazamiento suave jQuery

También podemos crear un módulo scrolltop de jQuery reutilizable para cualquier enlace interno con el siguiente código.

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500);
})

Profundicemos en la lógica del código aquí. (Consulte los archivos scrollToInternalLink.html, scrollToInternalLink.js y scrollToInternalLink.css).

Primero, seleccionamos las etiquetas a con el selector de atributos jQuery [href^="#"]. Usamos el signo ^, por lo que jQuery solo selecciona aquellas etiquetas a con un atributo href que comienza con el signo #.

Vinculamos a cualquier elemento internamente usando identificadores de fragmentos. Estas son referencias a enlaces internos, y siempre las antecedemos con el signo #.

Entonces, nuestro selector jQuery anterior selecciona los enlaces internos en la página.

Puede leer más sobre enlaces internos en HTML aquí.

Luego llamamos al método e.preventDefault() para deshabilitar el comportamiento predeterminado de la etiqueta a que recarga la página.

Ahora, extraemos el hash del elemento de destino: esta es la referencia al “identificador de fragmento” del elemento de destino. La mayoría del código HTML moderno utiliza el atributo id de nuestro elemento de destino.

Usamos este hash para seleccionar nuestro elemento de destino.

El resto del código es el mismo que el código jQuery animate to scroll to anterior. Pasamos el método animate() y establecemos la propiedad scrollTop en el valor offset().top del elemento de destino.

jQuery Desplazarse al elemento dentro de un contenedor

A veces, nuestro elemento de destino se encuentra dentro de un contenedor desplazable. Podemos usar el siguiente código para jQuery a un elemento posicionado como este.

let container = $('#container');
let scrollToMe = $('#scrollToMe');

$('button').on('click', function() {
  container.animate(
      {
        scrollTop: scrollToMe.offset().top - container.offset().top +
            container.scrollTop()
      },
      500)
});

Aquí, #container es un elemento div externo que actúa como nuestro contenedor.

#scrollToMe es la imagen de destino a la que queremos desplazarnos. Está anidado dentro del contenedor div exterior.

Además, el contenedor div exterior tiene otros elementos div y p anidados. Este contenedor exterior div se puede desplazar y tiene una barra de desplazamiento vertical.

Agregamos el controlador de eventos clic al botón de activación. La devolución de llamada ejecuta el método animate en el elemento contenedor.

Establece la propiedad scrollTop del contenedor en un nuevo valor. Calculamos este nuevo valor con la siguiente fórmula.

scrollToMe.offset().top - container.offset().top + container.scrollTop()

1. scrollToMe.offset().top es el número de píxeles desde la parte superior del documento hasta el elemento de la imagen de destino.
2. container.offset().top es el número de píxeles desde la parte superior de la página hasta la parte superior del elemento contenedor div.

Pero, hay una pequeña trampa. El elemento contenedor div es desplazable; si se desplaza inicialmente, se ha movido hacia abajo esa misma cantidad de píxeles.

Entonces, tenemos que agregar ese factor de container.scrollTop() al parámetro que pasamos al método scrollTop.

Consejos a tener en cuenta

Tenemos dos consejos importantes para desplazarse a un elemento utilizando los métodos anteriores de jQuery.

Consejo profesional 1:

Los métodos offset y position devuelven un valor float, y si esperas muchos zooms en tu página, podría causar errores. Así que puedes usar la función parseInt para convertir primero el valor devuelto en un valor int.

$('#clickButton').on('click', function() {
  $([
    document.documentElement, document.body
  ]).scrollTop($('#scrollToMe').parseInt(offset().top));
});

Consejo profesional 2:

La animación() también toma una función de aceleración como argumento. Esta función decide cómo se ejecuta la animación.

El valor predeterminado de esta función es swing, que proporciona un efecto de animación suave y uniforme. Por lo tanto, podemos usar este valor predeterminado para obtener jQuery de desplazamiento suave.

Dos atajos rápidos para jQuery ScrollTop

Finalmente, tenemos dos atajos rápidos para dos casos de uso comunes de desplazamiento de jQuery a un elemento.

jQuery Desplácese hasta la parte superior del acceso directo del documento

Si tiene una página web larga con mucho contenido, querrá proporcionar un enlace "scroll to top" en la parte inferior para facilitar la navegación.

El código abreviado para dicho enlace ancla es:

// this code scrolls to the top of the document with a click on the anchor
// element

$('#top').on('click', function() {
  $(document.documentElement, document.body).animate({scrollTop: 0}, 500);
});

Establecemos el valor objetivo scrollTop de la función animate en 0, lo que nos desplaza a la parte superior de la página.

Agregar identificador de hash/fragmento a la URL en jQuery Desplazarse al elemento

Si desea agregar el identificador de fragmento de su elemento de destino a la URL en la barra de direcciones, debe agregar solo una línea a nuestro código de enlace de desplazamiento hacia arriba.

// this code adds the fragment identifier/hash of the target
// element to the URL

// this is a reusable module to jQuery scrollTop from any internal link

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  let targetHash = this.hash;
  let targetEle = $(targetHash);

  $([
    document.documentElement, document.body
  ]).animate({scrollTop: targetEle.offset().top}, 500, function() {
    window.location.hash = targetHash;
  });
})

La línea window.location.hash = targetHash es el código que proporciona esta funcionalidad.

Puede ver que el identificador de hash/fragmento del elemento scrollToMe se agrega al final de la URL.

Tenga cuidado de incluir este fragmento de código como una devolución de llamada a la función animate para asegurarse de que se ejecute después de la animación, en sincronía con las mejores prácticas de JavaScript.