0

Tengo varios enlaces internos a ciertos id en la misma página con la etiqueta a href="#seccion1" en react. Quisiera saber si con Javascript o JSX puedo evitar que se modifique la url al oprimir un enlace, mis url quedan así: www.pagina.com/#seccion1 , no quiero que se agregue el #seccion1. En esta página vi esa idea: https://www.rudegolems.com/

1 respuesta 1

0

Se me ocurre que puedes usar la función scrollIntoView pasándole el id del botón, por ejemplo:

Agregar los botones o enlaces a usar:

<a class="desplazar" moveTo="Desplazar1" href="#">Desplazar 1</a>
<a class="desplazar" moveTo="Desplazar2" href="#">Desplazar 2</a>

A estos le pasamos un atributo llamado moveTo que guardara el ID del anclaje

Agregamos nuestros items con el ID del ancla

<div id="Desplazar1" style="margin-top: 400px;height: 300px;background: #000;color: #fff;">Desplazar 1</div>
<div id="Desplazar2" style="margin-top: 200px;height: 300px;background: #000;color: #fff;">Desplazar 2</div>

luego obtenemos todos los enlaces con la clase .desplazar

var links = document.querySelectorAll( '.desplazar' );

Luego usando forEach recorremos todos los enlaces.

links.forEach( link =>{
    link.addEventListener( "click",_ => {
            
    });
});

Y aqui viene la magia, usamos

event.preventDefault()

para eliminar el evento por defecto, luego, al objeto actual le extraemos nuestro ID a desplazar usando getAttribute

let moveTo = link.getAttribute( 'moveTo' );

Y por ultimo hacemos el scroll usando scrollIntoView

document.getElementById( moveTo ).scrollIntoView(true);

Ejemplo:

var links = document.querySelectorAll( '.desplazar' );

    links.forEach( link =>{
        link.addEventListener( "click",_ => {
            
            event.preventDefault();
            let moveTo = link.getAttribute( 'moveTo' );
            document.getElementById( moveTo ).scrollIntoView(true);

        });
    });
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
</head>
<body>

    <a class="desplazar" moveTo="Desplazar1" href="#">Desplazar 1</a>
    <a class="desplazar" moveTo="Desplazar2" href="#">Desplazar 2</a>

    <div style="margin-top: 400px;height: 300px;background: #000;color: #fff;" id="Desplazar1">Desplazar 1</div>
    
  <div style="margin-top: 200px;height: 300px;background: #000;color: #fff;" id="Desplazar2">Desplazar
  2</div>

</body>
</html>

Esto debería permitirte desplazarte a las anclas sin comprometer las urls.

1
  • Si me funciono, muchas gracias.
    – Camilo SW
    Commented el 20 ene. 2022 a las 0:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.