remove hash location from history and browsers back button

Question

i have a project in which i have to scroll to a particular image out of a list of them. those images are lazy loaded (since they are all high resolution).

my current approach is to have an internal link to each one of them:

<a name="photo1"><img ... /></a>

when i click on a thumbnail to see the original photo i get a click by doing:

location.hash = "#photo1"

the problem is when i click browser back and forward, the page does not go back to the prev page, instead goes back to whatever photo link has been clicked previously

how can i remove all hash from history?

score 3 · Answer 1 · answered Jan 02 '18 at 02:15

3

Your best bet here, I think, is to manually scroll to a target element with JavaScript.

Use the native scrollIntoView to jump to your element:

document.getElementById('[id]').scrollIntoView(true);

You can actually execute this in the <a> href attribute.

<a href="javascript:document.getElementById('[id]').scrollIntoView(true);">

Then, if you desire, you can manually add in the hash without adding a new history entry.

window.location.replace("#[id]");

Sources:

Making browsers ignore the URL hash when the back button is clicked

Scroll with anchor without # in URL

How to call JavaScript function instead of href in HTML

answered Jan 02 '18 at 02:15

Jordan Mann

402
6
16

this solution is not working for me because all images are lazy loaded and with different sizes, once an image is loaded and is taller than the min height, the selected thumbnail goes out of the view – karlelizabeth Jan 02 '18 at 05:15
Can you provide an example? – Jordan Mann Jan 02 '18 at 05:22
1

Just to be clear, `[id]` in your examples is intended to be replacement text? Making the actual invocation something like ``? – user1944491 Aug 24 '20 at 14:38
Yes, that's correct. So, in the original example, we'd use `document.getElementById('photo1')`. – Jordan Mann Aug 17 '22 at 16:52

remove hash location from history and browsers back button

1 Answers1