Skip to content

Instantly share code, notes, and snippets.

@Arxcis
Created January 25, 2019 08:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Arxcis/d9830bcebef0462f0d78a24953a34d70 to your computer and use it in GitHub Desktop.
Save Arxcis/d9830bcebef0462f0d78a24953a34d70 to your computer and use it in GitHub Desktop.
How to navigate without hard-refresh of browser
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#open {height: 200px;}
#close {height: 200px;}
#gallery { height: 200px; display: none; }
</style>
</head>
<body class="flex-column-center">
<button id="open">open</button>
<button id="close">close</button>
<button id="gallery">gallery</button>
<script>
window.addEventListener('load', function () {
document.getElementById('open')
.addEventListener('click', () => {
window.history.pushState(null, null, `${window.location.origin}${window.location.pathname}#psgallery`)
document.getElementById('gallery').style.display = 'block'
console.log(window.location)
})
document.getElementById('close')
.addEventListener('click', () => {
window.history.pushState(null, null, `${window.location.origin}${window.location.pathname}`)
document.getElementById('gallery').style.display = 'none'
console.log(window.location)
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment