Sé que puede navegar a una sección de la página usando etiquetas de anclaje, pero al hacerlo, se agregan palabras clave no deseadas a la URL.
Entonces, si la URL original era www.xyz.com , hacer clic en una etiqueta de anclaje <a href="#abc">abc</a> cambiaría la URL a www.xyz.com/#abc . No quiero que la URL cambie, ya que cada vez que haces clic en "atrás", simplemente vuelve a la sección anterior que tenía la URL anteriormente. ¿Hay alguna manera de evitar que esto suceda? ¿Quizás redirigir el botón Atrás para salir del sitio web o algo así?
¿Has probado a usar JavaScript? Utilice la función de desplazamiento a la vista. Aquí hay un ejemplo:
<a onclick="scrollthere()">go to the content<\a> <h1 id="stophere">This is content</h1> <script> function scrollthere(){ var element = document.querySelector("#stophere"); element.scrollIntoView(); } </script>Algo como eso. Onclick es un evento. Y entre paréntesis escribimos la función que queremos ejecutar al hacer clic en ella. En nuestro caso, es scrollthere, que se desplaza a nuestro elemento h1 que tiene "stophere". Se desplazará hasta que nuestro elemento no se vea. Puedes leer más sobre esto aquí . Buena suerte con su sitio web. Estoy haciendo un sitio web también :).
Mi solución es usar JS en lugar de usar el comportamiento <a> .
por ejemplo
document.querySelectorAll("a").forEach((item, idx) => { item.addEventListener("click", (e) => { e.preventDefault(); const hash = e.target.hash; window.scrollTo({ top: document.querySelector(hash).offsetTop, behavior: "smooth" }); }); }); * { margin: 0; padding: 0; box-sizing: border-box; } .section { width: 100%; height: 100vh; } .sec-1 { background-color: salmon; } .sec-2 { background-color: teal; } <a href="#sec-1">Section 1</a> <a href="#sec-2">Section 2</a> <div id="sec-1" class="section sec-1"></div> <div id="sec-2" class="section sec-2"></div> En mi caso, uso la propiedad scrollTo() .
Espero que esto pueda ayudarte.
Puede establecer su atributo href en una cadena vacía.
<a href="">abc</a>