Welcome to a quick tutorial on how to redirect on click in Javascript. Need to redirect the user after they click on a button, or after they have submitted a form?
There are 3 possible ways to redirect on click in Javascript:
<button onclick="location.href='URL'"> Redirect </button>
<button onclick="location.assign('URL')"> Redirect </button>;
<button onclick="location.replace('URL')"> Redirect </button>
While all these seem to do the same thing, they are actually slightly different. Read on for more examples and the differences!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & NOTES
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
ON CLICK REDIRECTION
All right, let us now get into more examples of how to do a webpage redirection in Javascript.
1) LOCATION HREF & LOCATION ASSIGN
<input type="button" value="HREF" onclick="location.href='1b-location-href.html'">
<input type="button" value="ASSIGN" onclick="location.assign('1b-location-href.html')">
<h1>Redirected!</h1>
<p>You can hit "back" to go back to 1a-location-href.html.</p>
As in the introduction above, there are 3 main ways to change the URL. First, we have location.href
and location.assign()
. Yes, take note:
location.href
is a property. We can retrieve the current URL fromlocation.href
, and assign a new URL to change the current page –location.href = URL
.location.assign()
is a function. We call this function to change the current page –location.assign(URL)
.
2) LOCATION REPLACE
<input type="button" value="REPLACE" onclick="location.replace('2b-location-replace.html')">
<h1>Redirected!</h1>
<p>2a-location-replace.html is not in the navigation history.</p>
Next, we have location.replace()
. While this also does a redirection, take note of the difference here:
location.href
andlocation.assign()
– Both will record the current page into the navigation history before redirecting. For example, we do alocation.assign("PAGE-B.HTML")
onPAGE-A.HTML
. The user can hit “back” and go back toPAGE-A.HTML
.location.replace()
– Replaces the current URL. For example, we do alocation.replace("PAGE-B.HTML")
onPAGE-A.HTML
. In the navigation history,PAGE-A.HTML
is replaced withPAGE-B.HTML
.
Long story short –
- Use
location.href
andlocation.assign()
if you allow the user to go back. - Use
location.replace()
if you don’t want the user to go back.
3) REDIRECT IN THE SAME PAGE – SCROLL TO BOOKMARK
<script>
function goToBookmark () {
location.hash = "bookmark";
document.getElementById("bookmark").scrollIntoView();
}
</script>
<span onclick="goToBookmark()">Go to bookmark</span>
<div style="height: 2000px"></div>
<span id="bookmark">The Bookmark.</span>
<div style="height: 2000px"></div>
A quick recap on the “normal HTML way” to create an internal bookmark:
- Give the element an ID. For example,
<p id="target">Foo</p>
. - Point the anchor link to the bookmark. For example,
<a href="#target">Go To Foo</a>
.
In Javascript, we can access the bookmark portion of the URL with location.hash
. But here’s the problem – If we just set location.hash = "BOOKMARK"
, that will not trigger a “scroll to element”. This is why we need to manually do an ELEMENT.scrollIntoView()
.
EXTRA BITS & LINKS
That’s all for this guide, and here is a small section on some extras and links that may be useful to you.
EXTRA) LOCATION OR WINDOW.LOCATION?
console.log(location);
console.log(window.location);
console.log(window.location === location); // true
In some other tutorials, you will see people using window.location
instead of location
. Is there a difference? Apparently, the answer is no. location
and window.location
refers to the same thing. So go ahead and be a lazy code ninja. It is safe to use location
and drop that windows
part.
EXTRA) WINDOW.NAVIGATE!?
If you have been poking around the Internet, you may have also spotted some tutorials using window.navigate()
to redirect the page. Take extra note that window.navigate()
is an ancient Internet Exploder Explorer thing. It is not supported in most modern browsers – Don’t use this anymore.
LINKS & REFERENCES
- Location – MDN
- History – MDN
- Redirect based on bookmark link – StackOverflow
- Javascript Redirect With Parameters – Code Boxx
INFOGRAPHIC CHEAT SHEET

THE END
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!