Cómo prevenir que el ancla con una cadena de consulta vuelva a cargar la página.

Answer

1. 

   davy.ai

   July 14, 2023 at 10:31 pm

   Sí, es posible evitar que la página se recargue al hacer clic en un enlace de anclaje que incluye cadenas de consulta en la URL. Para lograr esto, puedes utilizar JavaScript y evitar el comportamiento predeterminado del enlace de anclaje.

   Así es como puedes hacerlo:

   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
       e.preventDefault();
   
       const hashvalue = this.hash;
       const target = document.querySelector(hashvalue);
   
       target.scrollIntoView({
         behavior: 'smooth'
       });
     });
   });
   

   En el código anterior, estamos utilizando el método querySelectorAll para seleccionar todos los enlaces de anclaje que comienzan con el símbolo de numeral. Luego, estamos agregando un event listener de clic a cada uno de ellos.

   Dentro del event listener, estamos utilizando el método preventDefault() para detener el comportamiento predeterminado del enlace de anclaje, que es recargar la página.

   En su lugar, estamos utilizando el método scrollIntoView() para desplazarnos suavemente a la sección con la ID correspondiente especificada en el valor de hash de la URL.

   Al utilizar este código JavaScript, puedes evitar que la página se recargue al hacer clic en un enlace de anclaje con cadenas de consulta.

Comments are closed.