Esto es algo que se puede conseguir manipulando la información de sesión y navegación con JavaScript. Internamente no tendrías que cambiar nada en los enlaces (que seguirían teniendo el #
), pero vas a ocultarlo en la barra de navegación.
Nota: Este método podría tener consecuencias negativas si el usuario usa las teclas de historial para recargar la página y moverse hacia adelante o atrás. (En Chrome parece que funciona bien hacia adelante y atrás, a menos que pulses recargar). También podría tener problemas de al hacer deep linking.
La idea sería detectar un cambio en el #
y reemplazar el estado del historial para que se muestre una URL diferente, sin el #
. Algo como esto:
// cuando cambia el hashtag
window.addEventListener("hashchange", function() {
// cambia la URL de la barra de dirección con el hashtag
history.replaceState({}, null, window.location.hash.replace("#", "/"));
});
Nota: éste es un ejemplo ilustrativo y muy básico del código en JS, en el que se asume que vas a estar siempre en la raíz del sitio. Para que funcione con diferentes niveles, tendrías que añadir algo más de lógica.
Vamos a ver un ejemplo con ese código. Imaginemos que estás en http://example.com
con el siguiente código HTML:
<div id="target1">
<h2>Ventana modal</h2>
<a href="#target2">Ir a Sección</a>
</div>
<div id="target2">
<h2>Sección 1</h2>
</div>
<a href="#target1">Abrir Modal</a>
Y sigues los siguientes pasos:
Cargas la página y la url en la barra de dirección es http://example.com/
Pulsas en el enlace "Abrir modal" y se salta al modal. Como ha cambiado el hash a #target1, se ejecuta el código JS (esto ocurre en un instante y el usuario no nota cambio alguno) y la url en la barra de dirección es http://example.com/target1
Pulsas en el enlace "Ir a sección" y el navegador te lleva a la sección especificada. Como ha cambiado el hash a #target2, se ejecuta el código JS (de nuevo, en un instante) y la url en la barra de dirección es http://example.com/target2