I have a page that uses a <a href="#portafolio">
to scroll to a specific anchor like this <a name="portafolio"> </a>
.
When I click on a link <a href="#portafolio">
an address like this is createdhttp://myportafolio.com/#portafolio
How to do using vanilla.js or any other suggested method to hide the url hash so no history is generated; since, when clicking on a link in the menu, a history is generated, which when going back in the browser's search bar, goes through all the visited links until returning to the beginning and when refreshing the browser, it stays at the last link visited.
How do you transform this: http://myportafolio.com/#portafolio
into this: http://myportafolio.com/
without generating history when I visit an anchor within the same page?
You can refer to this post: https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r/5298684#5298684
But basically it would be altering the browser's history:
window.history.pushState("", document.title, window.location.pathname);
If you don't want to preserve history you can use instead of pushBack:
window.history.replaceState(null, null, ' ')
You can find out more about this thread at this link https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r
If you want to do it without using a button tag and do it via an a tag at once while maintaining the behavior of an anchor and centrally controlling hash removals, you can simply do it in window.onhashchange:
This approach is recommended, as long as you want to remove the hash of all anchors, and in case you want to filter the removals you can do it from here.
If you instead want to have more decentralized control over each tag, you can create an asynchronous task by executing the anchor behavior to remove the hash:
With this last solution the handling of the events on each anchor is independent of the others.