How do I create a back link to a URL that contains an anchor?

Question

I have a page which displays a filter-style menu that users can click to display particular listing category. When they click a listing thumbnail it opens the full listing page. At the top of that page is a "Back" text link. I need that link to return to the exact filtered category of the previous page.

The filtered category URL is something like this:

/residential/#listing-category

On the "Back" text link of the full listing page, I've tried:

<a href="javascript:history.back()">Back</a>

and also tried:

<a href="javascript:history.go(-1)">Back</a>

However, those only return to /residential instead of /residential/#listing-category

How do I get the Back link to return to the full URL (e.g. /residential/#listing-category)?

Answer 1

When using hash links browser does not store the hash part in the history, but you can manually add a new history to the current session whenever moving to a hash link on the page using history.pushState.

history.pushState(state, '', window.location.href) // state can be null or {}