I'm creating an image slider in css3 with the :target selector. I have a next and previous button that are executing this line of javascript

window.location = "#image" + image;

The problem is that if i click the back button of my browser, it shows the previous image of the slider. I want the back button to go to the previous page, not the previous anchor.

Thanks for the help

I'm creating an image slider in css3 with the :target selector. I have a next and previous button that are executing this line of javascript

window.location = "#image" + image;

The problem is that if i click the back button of my browser, it shows the previous image of the slider. I want the back button to go to the previous page, not the previous anchor.

Thanks for the help

• javascript
• html
• css

• soooo, why exactly is it you're changing the hashtag of the URL if you don't need the hashtag history? – Zathrus Writer Commented Oct 11, 2013 at 14:33
• 4 well the most simple thing would be to stop changing the url, and find another way to slide the images – Bobby5193 Commented Oct 11, 2013 at 14:33
• I agree with that, i will probably change it to a jquery slider instead of css3 – Marc-André Therrien Commented Oct 11, 2013 at 15:35

2 Answers 2

window.location.replace("#image" + image);

This does a simple redirect without adding it to the history.
MDN: https://developer.mozilla/en-US/docs/Web/API/Location.replace
Previous question: What's the difference between window.location= and window.location.replace()?

Use History API:

history.replaceState({}, document.title, "#image" + image);

history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.

replaceState() is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.