Tengo algunos fragmentos de URI en una aplicación que estoy creando que saltarán a los elementos dentro de la página como se esperaba, sin embargo, hacer clic en estos enlaces de fragmentos también los agrega al historial, por lo que si navego a otra página y hago clic hacia atrás, navegará a la última página Y al fragmento utilizado por última vez cuando prefiero que los fragmentos no modifiquen el historial, por lo que hacer clic en Atrás solo me lleva a la parte superior de la página anterior sin desplazarse automáticamente al último fragmento.
Es posible que desee utilizar Element.scrollIntoView para desplazarse a un elemento en el documento sin afectar la URL actual o el historial.
Entonces, en lugar de un enlace como
<a href="#next-section">Scroll to next section</a>tendrías
<a href="#" onclick="document.querySelector('#next-section').scrollIntoView(); event.preventDefault();">Scroll to next section</a> O el código equivalente en un archivo JavaScript separado: básicamente, encuentre el elemento al que desea desplazarse usando la API DOM (con document.querySelector , document.getElementById , etc.) y luego llame a scrollIntoView en el elemento.
Si el elemento que recibe el evento de clic es un enlace ( <a> ), también deberá llamar a event.preventDefault() para anular el comportamiento predeterminado de navegar al objetivo href (tenga en cuenta que es posible que aún necesite un atributo href ficticio para el estilo esperado).
<a href="#" onclick="document.querySelector('#next-section').scrollIntoView(); event.preventDefault();">Scroll to next section</a> <div style="height: 8.5em;"></div> <h2 id="next-section">Next section</h2> <div style="height: 7em;"></div> <h2 id="another-section">Another section</h2> <div style="height: 5em;"></div>