4

Tengo una pagina que usa un <a href="#portafolio"> para desplazar hacia una ancla especifica como esta <a name="portafolio">&nbsp;</a>.

Cuando doy click a un link <a href="#portafolio"> se crea una dirección como esta http://myportafolio.com/#portafolio

Cómo hacer usando vanilla.js o cualquier otro método sugerido para ocultar el hash de la url y que no se genere historial; ya que, al dar click a un link del menu se genera un historial, que al dar hacia atrás en la barra de busqueda del navegador recorre todas los links visitados hasta regresar al inicio y al refrescar el navegador se queda en el último link visitado.

Cómo transforma esto: http://myportafolio.com/#portafolio en esto: http://myportafolio.com/ sin generar historial cuando visito una ancla dentro la misma pagina?

2 respuestas 2

2

Puedes referirte a este post: https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r/5298684#5298684

Pero básicamente sería alterando la historia del navegador:

window.history.pushState("", document.title, window.location.pathname);

function removeHash() { 
    window.history.pushState('', document.title, window.location.pathname)
    btn.disabled = !(location.hash || location.href.slice(-1) == '#')     
}

const btn = document.getElementById('remove')

btn.disabled = !(location.hash || location.href.slice(-1) == '#')
btn.onclick = removeHash

window.onhashchange = function () { 
    btn.disabled = !(location.hash || location.href.slice(-1) == '#')     
}
<button id="remove" disabled>Quitar #</button> <a href="#hash">Simular</a>

Si no quieres preservar la historia puedes utilizar en lugar de pushBack:

window.history.replaceState(null, null, ' ')

Puedes averiguar más sobre este hilo en este enlace https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r

2
  • Gracias Mauro por tu respuesta, probé el código y realmente funciona, pero no he podido implementarlo con el ancla <a> para que se quite automáticamente el #hash Aquí el código jsfiddle.net/JuanDSi/dkeos6xt/13 el 20 jul. 2019 a las 15:05
  • Te lo contesto en otra respuesta que extienda a la que te he dado aquí para que quedé la referencia y la comunidad pueda colaborar en aportar más información de creerlo necesario. El código de las dos soluciones puedes encontrarlo también aquí: jsfiddle.net/mastepanoski/mn2v4swj , jsfiddle.net/mastepanoski/y8x7p3m9, para las dos formas. el 21 jul. 2019 a las 16:47
1

Si quieres hacerlo sin utilizar una etiqueta button y hacerlo vía una etiqueta a de una vez manteniendo el comportamiento de un ancla y controlando de forma centralizada las eliminaciones de hash, puedes simplemente hacerlo en window.onhashchange:

  window.onhashchange = function () {
    window.history.pushState('', document.title, window.location.pathname)
  }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <a href="#hash" id="remove">Simular</a>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <a id="hash"></a>
  <h1>That's ancla</h1>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</body>
</html>

Este enfoque es el recomendado, siempre y cuando quieras eliminar el hash de todas las anclas, y en caso de querer filtrar las eliminaciones puedes hacerlo desde aquí.

Si en en cambio quieres tener un control más descentralizado sobre cada etiqueta , puedes crear una tarea asíncrona al ejecutar el comportamiento del ancla para eliminar el hash:

function removeHash() {
  // Ejecutar en una tarea asíncrona para eliminar el hash
  setTimeout(function() {
  	window.history.pushState('', document.title, window.location.pathname)
  }, 500)
}

const removeLnk = document.getElementById('remove')
removeLnk.onclick = removeHash
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <a href="#hash" id="remove">Simular</a>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <a id="hash"></a>
  <h1>That's ancla</h1>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
  <p>Lorem ipsum</p>
</body>
</html>

Con esta última solución el manejo de los eventos sobre cada ancla es independiente de las otras.

1
  • 1
    Muchas gracias Mauro, funcionó perfecto. Me faltaba el callback el 22 jul. 2019 a las 21:54

Tu Respuesta

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

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