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
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.