javascript - Force page reload with html anchors (#) - HTML & JS

Question

Say I'm on a page called /example#myanchor1 where myanchor is an anchor in the page. I'd like to link to /example#myanchor2, but force the page to reload while doing so.

The reason is that I run js to detect the anchor from the url at the page load. The problem (normally expected behavior) here though, is that the browser just sends me to that specific anchor on the page without reloading the page.

How would I go about doing so? JS is OK.

Answer 1

I would suggest monitoring the anchor in the URL to avoid a reload, that's pretty much the point of using anchors for control-flow. But still here goes. I'd say the easiest way to force a reload using a simple anchor-link would be to use

<a href="?dummy=$random#myanchor2"></a>

where in place of $random insert a random number (assuming "dummy" is not interpreted server side). I'm sure there's a way to reload the page after setting the anchor, but it's probably more difficult then simply reacting to the anchor being set and do the stuff you need at that point.

Then again, if you reload the page this way, you can just put myanchor2 as a query parameter instead, and render your stuff server side.

Edit
Note that the link above will reload in all circumstances, if you only need to reload if you're not already on the page, you need to have the dummy variable be more predictable, like so

<a href="?dummy=myanchor2#myanchor2"></a>

I would still recommend just monitoring the hash though.